border-image-source Archives

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:

Enjoy coding!