Multiple Borders with CSS

While fiddling around with the CSS3 box-shadow property, I stumbled across a method to put a double border on a single element. I thought to myself, that’s pretty cool, but obviously, it will only work in newer browsers that support box-shadow.

So I wondered how many different ways there are to create an element that has the appearance of a double border. Naturally, the most common way is by using a non-fluid background image. But that’s obviously not ideal.

So, I’ve compiled five different methods for doing this. Only one requires use of an image; the rest are pure CSS, with pretty good browser support for all methods. For brevity, in the code examples I’ve removed the common stuff like width, height, background, etc. You can view all the examples on the demo page:

Method 1: Border and Outline

This method will only work on browsers that support the outline property, so that means everything but IE6/7. Basically, you add a border using both the border and outline properties. Here’s the CSS, not including the stuff that’s common to all the examples (like width, float, background, etc):

.one {
	border: solid 6px #fff;
	outline: solid 6px #888;	
}

The reason it works is because an outline is always placed outside of the box. The problem with the outline property is that it doesn’t affect the flow of elements around it, so it will overlap or underlap other elements, so that could be undesirable.

Method 2: A Pseudo-Element

This one’s a bit tricky, because it requires (from what I can tell) absolutely positioning the border—which would seem to make it non-fluid. Well, using a bit of trickery, I was able to make this method work and be vertically fluid. Here’s the pertinent code:

.two {
	border: solid 6px #fff;
	position: relative;
	z-index: 1;
}

.two:before {
	content: "";
	display: block;
	position: absolute;
	top: -12px;
	left: -12px;
	border: solid 6px #888;
	width: 312px;
	padding-bottom: 12px;
	min-height: 100%;
	z-index: 10;
}

The key parts are the z-index settings (to keep the pseudo-element from overlapping the content), the positioning, and the min-height value. The latter keeps the fluidity intact.

Method 3: Box Shadow

As mentioned, the idea for this experiment was the result of serendipitous fiddling with box-shadow settings. I personally like this one the best, because it’s just one line of code, and it uses a new technology in an unexpected way.

.three {
	box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
}

To make the shadow appear like a double border, I’m using two shadows (comma separated) and I’ve set the offset and blur settings to zero, while giving each shadow an appropriate size. Because one overlaps the other, the second shadow is twice the size of the other. The key parts are the lack of blur and a fully opaque color. This gives each shadow a straight edge, just like a border.

Just like the outline property, box-shadow will not impact elements around it, so you might have to fiddle with margins to position it so that it looks like a regular box with a border.

Naturally, this is limited to browsers that support box-shadow.

Method 4: An Extra Div

This method nests an extra <div> to give the appearance of a double border. This is the only one of these methods listed here that works everywhere (although even this one looks a bit whacked in my demo in IE6/7 because of margin settings, but that can be corrected). Not much else to say about this one, just a natural use of borders and backgrounds:

.four {
	border: solid 6px #888;
	background: #fff;
	width: 312px;
	min-height: 312px;
}

.four div {
	width: 300px;
	min-height: 300px;
	background: #222;
	margin: 6px auto;
	overflow: hidden;
}

The styles for this method would vary depending on the size and context of the box, but as you can see, the outer box is 12 pixels bigger than the inner box, to accommodate the space that lets the background peek through, giving the illusion of two borders on a single element.

Method 5: Border Image

Another modern-browser method, this one uses the often-forgotten CSS3 border-image property:

.five {
	border-width: 12px;
	-webkit-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;
	-moz-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;
	border-image: url(multiple-borders) 12 12 12 12 repeat; /* for Opera */
}

For an explanation of border-image see this post on SitePoint.

Any Other Methods?

I couldn’t think of any other methods to do this, so somehow I feel like I’ve overlooked something obvious. I’m sure someone will point it out if I have.

I’ve put all the methods in a demo page along with some JavaScript that will allow you to add and remove content from each box, so you can see that the box is not restricted to a single height.