HTML5 and CSS3 Advent 2011

Picture frames and other borders

Sometimes you want to give a box a special type of border that scales nicely with the size of the box. Until border-image we had to use the sliding door technique, some background-image hackery and sometimes unnecessary extra markup to achieve the desired effect. border-image relieves that pain and does exactly what it says: it lets you define an image for the border and it's quite smart about it too!

Examples

Let's have ourselves a groovy nineties-like border!

Repeating border

What a classy 20ies style border

Repeating but rounded
Ice skating
Classic picture frame (repeating)

Some border placements

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Repeat
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Round (webkit doesn't seem to do this...)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Stretch

How does it work?

Border image slicing visualized The border-image css property can be quite flexible and once you grasp the concept, it's not that hard to put to use. The image on the right is an enlarged version of the image we use in the "border placement" demos.

The syntax is a bit complex (we're still unsure why the slice offset doesn't have a unit except percentage) but here it is: border-image: url(image.png) top-offset right-offset bottom-offset left-offset / top-width right-width bottom-width left-width top-bottom-handling left-right-handling.

url(image.png)
The image you want to use as a border.
top-offset right-offset bottom-offset left-offset
This defines how the image is sliced, it can be shortened to 1, 2 or 3 values just like you can with padding, margin, etc. See the image on the right how these offsets work.
top-width right-width bottom-width left-width
The border width or each side, this is the same as setting border-width.
top-bottom-handling left-right-handling
Defines how the repeating/stretching should be handled. There are currently three options: stretch to stretch the image, repeat to repeat the image and round to tile the image but also stretch it so that whole number fits in the box.

Note that this is not the full syntax as you can abbreviate quite some of the properties and you don't have to create images like this, you can simply have an image repeat around the box too.

Show us the source!

Feel free to look around the different source files we used for this example.