Useful tip for creating double borders with CSS3

Posted in on 18 August 2010

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.

Related Posts

Comments

  1. Dmitry Pashkevich

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

  2. Clive Walker (Author)

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

  3. Prodyot

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

Comments

Enter your comment below. Fields marked * are required. You must preview your comment first before finally posting.