With CSS3 we can use images as border of an element. Apart from using the normal border styles already available in CSS, we can now make our web pages more colourful and attractive (if you really like colours and shapes!).
Just to go directly to the core, we can use the following style for, let's say, all divs in a document:
div
{
-webkit-border-image:url(myborder.png) 30 30 round;
-o-border-image:url(myborder.png) 30 30 round;
border-image:url(myborder.png) 30 30 round;
}
The border-image property is in fact a shorthand property. As you can see from the above example, we are using different values which are:1) border-image-source which is the path to our image;
2) border-image-slice which is the inward offsets of the image;
3) border-image-width which is the widths of the image;
4) border-image-outset which defines the portion of the image that goes beyond the box;
5) border-image-repeat which sets the way the image will be repeated.