CSS: Double Border

In pure CSS solutions, a double border can be achieved via either a combination of single borders or a single double border style.

2 single borders
<div class="wrap-1">
	<div class="wrap-2">
The CSS:
.wrap-1 {
	border:1px solid blue;
	padding:1px; /* how far away 2 borders are drawn, remove this line to make 2 borders stick to each other */
.wrap-2 {border:1px solid red;}

This text is wrapped by a red and a blue border, with 1px in between them.

With 2 single borders to make a double border, you are able to specify different colors for each of them and decide the exact gap between them.

Another approach is to style different background colors with padding to simulate borders.

1 double border
<div class="wrap">
The CSS:
.wrap {
	border:3px double blue;

This text is wrapped in a single double-border of 3px in width and colored blue.

border-style:double is rarely used however as I have tested it, it’s cross browser compatible: IE6, IE7, FF2, FF3, Opera 9.5, Safari 3 and Google Chrome.

However, the problem with double borders in this style is that you can’t specify different colors for each of the border and are stuck with an averaged width in the gap between them. Generally good though, to spice things up a little bit.

Some more CSS double border style examples

border:5px double blue;

border:15px double blue;

border:40px double blue;

border-left:5px double blue;

border-color:blue;border-style:double;border-width:7px 3px;

3 thoughts on “CSS: Double Border”

  1. Pingback: CSS: Styling WordPress Administration Control Panel Buttons

  2. Hey man, the first demo doesn’t look accurate as you used spans for the demo instead of divs like you suggest in the code. Span tags are display: inline by default whereas divs are display: block by default, just add “display: block;” to both spans style in the demo and it will look accurate, I’m just telling you this not to be picky but because I was confused at first, I thought it looked weird. But your code does actually work, you just need to fix that one thing. Cheers for the info.

Comments are closed.

Scroll to Top