CSS Border Image

0 3654

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 the image to be used for the 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>