The reason I am writing this guide is that I’ve read many of the current online tutorials and they are all quite confusing to those first approaching this CSS property.
It’s clear as well border-image will be play an increasingly important part in web design as the CSS2.1 border style property is limited to only nine different values, namely; dotted, dashed, solid, double, groove, ridge, inset, outset and inherit. Border-image allows these options to expand indefinitely.
The border-image property was first introduced into the WebKit rendering engine as far back as 2005 and first appeared in Firefox through the nightly builds in the summer of 2008. Opera will be using border-image from version 10.5 onwards. No current version of Internet Explorer supports this code yet (see workaround at the bottom) but there are mumblings of CSS3 support for IE9 whenever that is released.
It can look quite a complex syntax at first and there are some important differences between border-image and all other CSS, as will be explained.
In this tutorial all examples of the property in action are images so that they can be viewed in any browser.
The important thing to remember with using images for a border is that it is not a case of just repeating the same small image but of slicing it into 9 different parts.
This may sound confusing so lets give you an example.
Here’s the code for example one:
p {
border-image: url(“images/border-example-image-fill.gif”) 0% stretch;
-moz-border-image: url(“images/border-example-image-fill.gif”) 0% stretch;
-webkit-border-image: url(“images/border-example-image.gif”) 0% stretch;
}
Here’s the image that we’ll use for the border:
And here’s how the border will look when wrapped around a paragraph.
It’s pretty obvious what has happened here. The image has been stretched across the entire size of the element.
So it is possible to use border-image this way but what you really need to do – and something that other border-image tutorials elsewhere don’t make clear – is declare a border width.
Lets give a second example of border-width and we’ll use a different image this time.
Here’s the code:
p {
width: 300px;
border-image: url(‘images/border-example-two-image.gif’) 27 27 27 27 stretch stretch;
-moz-border-image: url(‘images/border-example-two-image.gif’) 27 27 27 27stretch stretch;
-webkit-border-image: url(‘images/border-example-two-image.gif’) 27 27 27 27 stretch stretch;
border: 10px solid black;
}
Notice in the code above I have now specified that the border will be 10px wide. I have also declared values to make sure that the border is solid and black. This is important as it means that IE will show the 10px solid black border, while the other browsers will show a 10px image border.
For the record note how I am using the webkit prefix for Chrome and Safari browsers and the moz prefix for Firefox. I have also used border-image straight as that is the correct CSS3 code and will be recognised by Opera 10.5 and upwards.
And here is the background image:
The dimensions for this image are 64px square with nine circles 30px wide and a 1px gap around every circle. As I stated before, border-image slices the picture nine different ways.
And here is how the border-image looks:
Lets change the code a little:
p {
width: 300px;
border-image: url(‘images/border-example-two-image.gif’) 23 23 23 23 round round;
-moz-border-image: url(‘images/border-example-two-image.gif’) 23 23 23 23 round round;
-webkit-border-image: url(‘images/border-example-two-image.gif’) 23 23 23 23 round round;
border: 10px solid black;
}
Notice how I now specify round instead of stretch. Look how this affects the border:
Lets take a detailed look at a line of code:
border-image: url(‘images/border-example-two-image.gif’) 23 23 23 23 round round;
It should be stated this is the shorthand version. Look at the measurement 23 repeated four times. The is the same as the border shorthand property so each digit goes in clockwise fashion from top to right to bottom to left. So changing the third digit to 23 23 27 23 would change the bottom border only. The first instance of round dictates the style the top and bottom border and second changes the right and left border – so this a little different to other CSS.
The actual measurement is in pixels although you can use percentages. It’s best to experiment with this as the effect of the measurement changes for different images.
Now I previously stated that you need to specify a border width in order for border-image to work as intended. However, not declaring a border width does produce some interesting design results.
Lets use the same background image as before but this time leave off a border width and change the measurements.
The code reads:
p {
width: 300px;
border-image: url(‘images/border-example-two-image.gif’) 21 25 21 25 round stretch;
-moz-border-image: url(‘images/border-example-two-image.gif’) 21 25 21 25 round stretch;
-webkit-border-image: url(‘images/border-example-two-image.gif’) 21 25 21 25 round stretch;
}
And the border looks as so:
As you can see using the same image but changing the code slightly produces a radically different type of border.
Just recently while creating a Drupal theme I used this same technique. I used a small 4px, two colour, transparent image and here is how it looks:
It created a very visually pleasing semi-transparent background style that has a lovely 3D twist in it.
So go armed, oh online creative, into design battle with border-image!