CSS Border Image

This border-image CSS property specifies how an image is to be used in place of the border style.

border-image-source : It specifies the path of image to be used for border.
border-image-slice : It specifies the slice the border image from top, right, bottom and left.
border-image-width : It specifies the width of the border.
border-image-repeat : It specifies the border image should be repeated, rounded or stretched

Example: 1 (Border image with stretch)

<!DOCTYPE html>
<html lang="en">
<head>
<title> Example of border-image property </title>
<style type="text/css">
.mybox {
width: 300px;
height: 150px;
order: 15px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
</style>
</head>

<body>
<div class="mybox"> </div>
</body>

</html>

Example: 2 (Border image with repeat)

<!DOCTYPE html>
<html lang="en">
<head>
<title> Example of border-image Property </title>
<style type="text/css">
.mybox {
width: 300px;
height: 150px;
order: 15px solid transparent;
padding: 15px;
border-image: url(border.png) 30 repeat;
}
</style>
</head>

<body>
<div class="mybox"> </div>
</body>

</html>



Example: 3 (Border image with round)

<!DOCTYPE html>
<html lang="en">
<head>
<title> Example of border-image Property </title>
<style type="text/css">
.mybox {
width: 300px;
height: 150px;
order: 15px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
</style>
</head>

<body>
<div class="mybox"></div>
</body>

</html>

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *