How to Use Image as a Border by Css | Border

Home

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