Categories
CSS & HTML Tips

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

By Yang Yang

Hello, I'm Yang. I build online businesses that please people. Want to join in and post some useful articles on Kavoir.com? Shoot me a message.

3 replies on “CSS: Double Border”

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.