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:


margin: 0 auto;

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


HTML code:

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

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