Home
CSS
CSS Border Images
Tryit: border-image - different slice values
Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Save Code
Ctrl+Alt+A
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
<!DOCTYPE html> <html> <head> <style> #borderimg1 { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 50 round; margin-bottom: 15px; } #borderimg2 { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 20% round; margin-bottom: 15px; } #borderimg3 { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 30% round; margin-bottom: 15px; } </style> </head> <body> <h1>The border-image Property</h1> <p>Different slice values completely changes the look of the border image:</p> <div id="borderimg1">border-image: url(border.png) 50 round;</div> <div id="borderimg2">border-image: url(border.png) 20% round;</div> <div id="borderimg3">border-image: url(border.png) 30% round;</div> </body> </html>
