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:
size of image needs to slice into 9 parts (does not need to be even or symmetric)
if the image is to tile seamlessly when repeated — ensure perfect alignment to slice lines
for ornamental corners/borders which extend beyond the main dimensions - the precise outset will need to be used for correct display
each side of the image can be applied as border image in one of the following ways:
image will be stretched to fit the width/height of the page element
image will be repeated to fit the width/height of the page element
image will be repeated to fit the width/height of the page element, ensuring that the visual fits perfectly within the image slice
border sample in Illustrator:
✒ 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.
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.
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.
For the implementation of the border image with custom corners - you will need to specify both the width and the slice:
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).