bordering on madness

the CSS border-image property

With more and more browsers implementing the newer CSS properties - it's exciting times ahead. One of the properties I've been waiting to use for quite a while is the border-image property which allows for various implementation of images as borders. There are quite a few good tutorials out there which cover this technique, please see links in the footer for reference.

This tutorial is a brief overview of commonly used approaches ~ but no means exhaustive.

before you get carried away
While this property is getting implemented - browser support is not great (yet) but we don't know whether IE will ever support it. You will need to use this technique with consideration and care. If your branding and design use the border visuals as an integral part - you might need to re-think and use a different approach to ensure a more consistent design across the browsers.
check browser support on CANIUSE.COM →

the border image file

To create your own custom borders you will need to plan and prepare your image file carefully, considering the final implementation within your design. This means ensuring that your dimensions, for the both the image file itself and your border visuals are produced exactly to size.

The image you create for use as border image will need to consider the following:

border sample in Illustrator:

screenshot of Illustrator artboard at 142px x 142px

✒ important note
On closer inspection you will notice that I have offset the coloured squares by 1px outside of the artboard. This is a precaution to ensure that the outer borders are filled with solid colour. This will then mean that the number for the slice and full width is 11px.

the CSS code

Do have a look at the official specs on W3C to understand the
CSS Backgrounds and Borders Module Level 3 : borders →

Take a look at this page's outer border as a first example. The image is made up of coloured strip, made from 12 squares (12px x 12px). The visuals are extruding the artboard outline by 1px.

border image with guidelines

To ensure clear display of the border - let's add the 1px again in the CSS, to set the slice:

body {						
	border: 6px solid #b0d104;
	border-width: 6px;
	-moz-border-image:    url(imgs/border-image.png) 12 stretch;
	-webkit-border-image: url(imgs/border-image.png) 12 stretch;
	-o-border-image:      url(imgs/border-image.png) 12 stretch;
	border-image:         url(imgs/border-image.png) 12 stretch;

note the missing IE prefix
The only reason why this is not included is that this property is not supported by IE - and there is no information about possible support in the future.

To ensure a similar feel of design for browsers which do not support the border-image property (either partially or not at all) it is best to set a default border style as fallback. It is important to consider the appearance of the design without the border visuals - for slim and minimal border, such as the coloured border of our example here, a suitable colour can be applied to keep the overall feel of the design for non-compatible browsers.

To define the border - we will initially set the border width for all, setting only one value will give equal width to all 4 sides, same as the standard border property. And of course, you can choose to define different widths if required. As you can see - our border image itself has a width of 12px - setting the border width for the page as 6px will essentially scale down the graphic to fit the dimensions.

The border image property should be applied with all browser prefixes ~ note that the only prefix missing at the moment is the one for Microsoft as it is not clear whether InternetExplorer will support this property in the near future at all.
The first declaration will now bring in the border image itself, using the url() same as the background image. Next, we can set the slice, here 12 is applied to all 4 sides equally (see image above) with the extra pixel just for good luck :)
The stretch declaration, again applied to all 4 sides equally, will scale the border image to fit the length/width of each side of the page element, in our case here framing the browser window with the borders.

fancy corners

While the example used for this page is fairly straight forward - you can use different widths for each side as well as incorporating more elaborate corners, for example.

Let's take the example of a custom square and apply the border property including a specific border, here shown as simple circle.

border image with guidelines

For the implementation of the border image with custom corners - you will need to specify both the width and the slice:

body {						
	border: 30px solid #E16400;
	-moz-border-image:    url(imgs/border-image-3.png) 30 30 stretch;
	-webkit-border-image: url(imgs/border-image-3.png) 30 30 stretch;
	-o-border-image:      url(imgs/border-image-3.png) 30 30 stretch;
	border-image:         url(imgs/border-image-3.png) 30 30 stretch;

The first example below shows the code above implemented. The border image including its corners looks as intended.
Adding background colour, you can see that due to the protruding nature of the corner circles - you will need the correct padding for any content within this container. And the use of a background colour might not fit your design concept - this is something to plan for carefully before finalising the graphics.

The third example hides the sharp corners via border radius.
The last example has the addition to the code above of the offset, which is intended to extend the container on all four sides. As you can see - this does not work well in all browsers yet and is unsupported, and should therefore not be set (yet).

design demo © 2012