CSS Border Images
CSS Border Images
With the CSS border-image property, you can set an image to be used as the border around an element.
CSS border-image Property
The CSS border-image property allows you to specify an image to be used instead of the normal border around an element.
The property has three parts:
The image to use as the border
Where to slice the image
Define whether the middle sections should be repeated or stretched
We will use the following image (called "border.png"):
The border-image property takes the image and slices it into nine sections,
like a tic-tac-toe board. It then places the corners at the corners, and the
middle sections are repeated or stretched as you specify.
Note: For border-image to work, the element also needs the
border property set!
Here, the middle sections of the image are repeated to create the border:
An image as a border!
Here is the code:
Example
#borderimg
{
border: 10px solid transparent; padding: 15px; border-image: url(border.png)
30 round;}
Try it Yourself »
Here, the middle sections of the image are stretched to create the border:
An image as a border!
Here is the code:
Example
#borderimg
{
border: 10px solid transparent;
padding: 15px; border-image: url(border.png)
30 stretch;}
Try it Yourself »
Tip: The border-image property is actually a shorthand property for the
border-image-source, border-image-slice, border-image-width,
border-image-outset
and border-image-repeat properties.
CSS border-image - Different Slice Values
Different slice values completely changes the look of the border:
Example 1:
border-image: url(border.png) 50 round;
Example 2:
border-image: url(border.png) 20% round;
Example 3:
border-image: url(border.png) 30% round;
Here is the code:
Example
#borderimg1 { border: 10px solid transparent;
padding: 15px; border-image: url(border.png)
50 round;}#borderimg2 {
border: 10px solid transparent; padding: 15px;
border-image: url(border.png) 20% round;}
#borderimg3 { border: 10px solid transparent;
padding: 15px; border-image: url(border.png)
30% round;}
Try it Yourself »
Test Yourself With Exercises
Exercise:
Give the div element an image border.
Use the short hand property to define the details of the image border.
<style>
div {
border: 10px solid transparent;
: url(border.png) 30 round;
}
</style>
<body>
<div>This is a div element. It has some text.</div>
</body>
Submit Answer »
Start the Exercise
CSS Border Image Properties
Property
Description
border-image
A shorthand property for setting all the border-image-* properties
border-image-source
Specifies the path to the image to be used as a border
border-image-slice
Specifies how to slice the border image
border-image-width
Specifies the widths of the border image
border-image-outset
Specifies the amount by which the border image area extends beyond the border box
border-image-repeat
Specifies whether the border image should be repeated, rounded or stretched
★
+1
Reference: https://www.w3schools.com/css/css3_border_images.asp
CSS Border Images
CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.