CSS Border Images
Posted: Fri Oct 27, 2023 8:24 am
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
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