Useful tip for creating double borders with CSS3

Posted in CSS3 CSS 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

• Responsive web design is easy with fluid layouts
• Checking out responsive grid systems
• Quick tip: Making jQuery tabbed content available for users without JavaScript
• Just a few things I've seen recently
• Transparent borders with CSS3
• Getting started with HTML5 and responsive design