HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
With the CSS border-image property, you can set an image to be used as the border around an element
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:
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.
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:
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 round;
}
Here, the middle sections of the image are stretched to create the border:
An image as a border!
Here is the code:
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 stretch;
}
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.
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:
#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;
}
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>
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 |