CSS3 - Border Image

CSS3 introduces a way to use an image as the borders of an element in your web page. It basically does this by slicing the image into nine pieces and resizing some of those pieces to fit the element.

The border-image attribute can take up to four values that between them specify both the image and how it is to be displayed.

These values can also be specified separately by using border-image-source, border-image-slice, border-image-width, and border-image-repeat.


div {border-image: url(frame.gif) 20 15 stretch;}


Note that not all browsers support the full specification for images in borders yet.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow