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.
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!
Some border placements
How does it work?
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.
- 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
- top-bottom-handling left-right-handling
Defines how the repeating/stretching should be handled. There are currently three options:
stretchto stretch the image,
repeatto repeat the image and
roundto 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.