Categories
CSS Web development

CSS border-image-source Property

CSS border-image-source Property

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

Syntax:

border-image-source: none|image;

none – no image will be used.

image – the path to the image to be used as a border.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg-1 { 
  border: 15px solid transparent;
  padding: 15px;
  border-image-source: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png);
  border-image-repeat: repeat;
  border-image-slice: 30;
}

</style>
</head>
<body>

<p id="borderimg-1">Hello World!</p>

</body>
</html>

Output:

Hello World!


The original image:

CSS border-image Property

Enjoy coding!

Read also:

CSS Gradient Border

CSS border-radius property