Categories
Web development

CSS border-image Property

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