CSS border-image Property

By using the CSS border-image property you can define an image to be used as the border around an element.

The CSS border-image property is a shorthand property for:

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

Syntax:

border-image: source slice width outset repeat;

border-image-source - defines the path to the image to be used as a border.

border-image-slice - defines how to slice the image defined by the CSS border-image-source.

border-image-width - defines the width of the border-image.

border-image-outset - defines the amount by which the border-image area extends beyond the border-box.

border-image-repeat - defines whether the border-image should be repeated, rounded or stretched.

Example:

<!DOCTYPE html> <html> <head> <style>  #borderimg-1 {    border: 10px solid transparent;   padding: 15px;   border-image: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png) 30 round; }  #borderimg-2 {    border: 10px solid transparent;   padding: 15px;   border-image: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png) 60 stretch; } </style> </head> <body>  <p id="borderimg-1">The image tiles to fill the area. The image is re-scaled if necessary, to avoid dividing tiles.</p> <p id="borderimg-2">The image is stretched to fill the area.</p>  </body> </html>

Output:

The image tiles to fill the area. The image is re-scaled if necessary, to avoid dividing tiles.

The image is stretched to fill the area.

The original image:

Enjoy coding!

Read also:

CSS Border Property

CSS Glowing Gradient Border