Useful tip for creating double borders with CSS3

Posted on by Clive Walker in CSS CSS3

I have posted about double borders with CSS before but there was a useful tip by Andy Hume (@andyhume) at a recent London Web Standards meeting where he described the use of CSS3 box-shadow (previously on this blog, Box Shadow and Image Hover Effects) to give the effect of double borders on an element. With box-shadow, if you use zero for the horizontal offset and blur radius values and a small pixel value for vertical offset, this will give you another ‘border’ on any element. If the element already has a border, this means that you can create double borders with different colors. Here’s how it works.

Using this CSS:

.anotherboxshadowclass {
       border: solid 2px #CCC;
	-moz-box-shadow: 0px 2px 0px #69C;
	-webkit-box-shadow:  0px 2px 0px #69C;
        box-shadow:  0px 2px 0px #69C;
}

… will give a grey and blue ‘double border’ like this:

Here is a paragraph with a double border effect using box-shadow. You should see a grey ‘inner’ border and a blue ‘outer’ border on the bottom of this paragraph.

Of course, the usual caveats about browser support for CSS3 box-shadow still apply. It is supported by Firefox, Chrome and Safari but not Internet Explorer 8. However, if you are using CSS3 properties in your work, I think this a nice tip.

PS: You can also use negative values to change the double border position from bottom to top and, of course, swap the vertical/horizontal values to put the border on the right (or left, with a negative value). And Simon Thulbourn suggested that you can use more than one box-shadow to get the effect on two or more sides.

Comments

  • 11 Jan 2012 11:34:55

    Unfortunately, this approach doesn’t allow you to create double borders with style other than ‘solid’ (i.e. dashed, dotted borders).

  • 11 Jan 2012 12:10:12

    @Dmitry: That’s true for the ‘outer border’ but the inner border can of course be dashed, dotted etc

  • Prodyot:

    19 Feb 2012 23:50:50

    Ah! You make it look so simple.
    Thanks for this tut.

Leave a comment

A simple question that helps prevent automated form fillers.