Image Borders

From Zanecorpwiki

Image borders are a CSS3 thing, and as I write this, CSS3 is still a draft. However, the Gecko (Firefox) and WebKit (Safari and Chrome) layout engines support an image border approach based on the 'CSS Backgrounds and Borders Module Level 3', and they work:

-moz-border-image: url(poster_border.png) 4 stretch;
-webkit-border-image: url(poster_border.png) 4 stretch;

The basic idea is clever, but takes care to understand.

1. You create a rectangular image that exemplifies the border you want to create.
2. In the CSS, you specify the source image, and how to slice it up.
3. In the slicing, you specify four numbers:
   1. from the left edge towards the right
   2. from the top edge down
   3. from the right edge towards the left
   4. from the bottom edge up
4. You then specify how to handle the tiling for the non-corner bits.

The key to all this is to understand the slicing. You can specify the slicing by either pixels or percentage, and there are shortcuts if some of the numbers are the same. (In my example above, all four slices are based on 4 pixels. The lack of 'px' seems idiomatic to me, but that's the way it is.)

If we go back to our rectangular source image, the slices create 9 sectors.

• To the left left of the left boundary and above the top boundary the upper-right-hand corner.
• Between the right and left boundaries and above the top boundary defines the top border.
• To the right of the right hand bondary and above the top boundary defines the upper-left hand corner.

In this fashion, continue through the slices and define:

• The right hand side border.
• The bottom right corner.
• The bottom border.
• The bottom left corner.
• The left hand border.

And finally, the middle piece which I don't address here.

The corner pieces are placed, corner to corner, to the corner of the bounded element. The top, right, bottom, and left border pieces used to make the respective borders of the element. The tiling attributes define how this is done (From current draft at W3).

• stretch: The image is stretched to fill the area.
• repeat: The image is tiled (repeated) to fill the area.
• round: The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does.
• space: The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.

I'm know that 'stretch', 'round', and 'repeat' are supported by the latest gecko and webkits. Not sure about space.

You can see examples here.