CSS: Double Border

• Tweet

• Tweet

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

The HTML:

<div class="wrap-1">
	<div class="wrap-2">
	</div>
</div>

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;}

Demo:

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

The HTML:

<div class="wrap">
</div>

The CSS:

.wrap {
	border:3px double blue;
}

Demo:

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;