Home Css Border How to Use Image as a Border by Css
How to Use Image as a Border by Css

Create Html File with following code.

<html>
<head>
<style type="text/css">
h2.s1{border: 6px solid #cccccc;
width:400;
}
</style>
</head>
<body>
<h2 class ="s1">How to Use image for border</h2>
</body>
</html>

Above code will give you following effect.

image-as-border-using-css

Take an image which you want to use as a border. I used the following image name is “border.gif”

image-as-border-using-css

To use an image for border we can add the CSS code.

-webkit-border-image: url(border.gif) 20 20 20 20 round round;
-moz-border-image: url(border.gif) 20 20 20 20 round round;
border-image: url(border.gif) 20 20 20 20 round round;

Above code will give you the following effect.

image-as-border-using-css

You can use following properties if you want to use image for each border

border-top-image
border-right-image
border-bottom-image
border-left-image

You can use following properties if you want to use image for each corner

border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image