How To Add Image in Border Using CSS

CSS3 border-image Property

The CSS3 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:

1. The image to use in Border Using CSS
2. Where to slice the image
3. 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 To Add Image in Border Using CSS.

 

Example To Add Image in Border Using CSS:

#img_border {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(img.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(img.png) 30 round; /* Opera 11-12.1 */
border-image: url(img.png) 30 round;
}