Objectives and outcomes

In this tutorial we are to learn about using border images in HTML/CSS. Well for border image we just have to use simple property in CSS i.e. border-image and some of its attributes.


The example for the same shown below-

Create your borders with fancy border images !!



CSS stylesheet:

<style>

#p1{
text-align:center;
padding:20px;
width:340px;
margin: 0 auto;

/* Set the border and border image properties */
border:30px solid transparent;
border-image:url("img/border.jpg") 30 30 round;
}

</style>





HTML code:

<html>
<body>
<p id="p1">Create your border with fancy border images</p>
</body>
</html>

To set the border of an element as image we use border-image property in CSS. As we can see that the first argument is source of the image. The next argument 30 is used to set the value of border-image-slice property, this property specifies how to slice the image. Now the next 30 is used to set the border-image-width. And the last argument round is for border-image-repeat property