Multiple Borders in CSS3

September 13, 2010 11:27 am Published by

While reading up on the CSS3 border-image property, I couldn’t help but think that something is getting left out of CSS3: multiple borders.

One of the W3Cs primary goals is to remove a web designer’s reliance on images in page layout and design. Which will also speed up load time. However, the only way to create multiple borders on one element would be to use the border-image property. Here is an example of border-image:

All colors outside this little white box are the border.

CSS

.multiple-border-example-1 {
	border: 20px solid transparent;
	-moz-border-image: url(images/multiple-border.png) 25% round;
	-webkit-border-image: url(images/multiple-borders2.png) 25% round;
	border-image: url(images/multiple-borders2.png) 25% round;
}

Image

box with blue borders

If none of the above CSS syntax makes sense to you (it took me a while to finally wrap my head around), I suggest you check out the links at the bottom of the page for further reading (because frankly, I’ll do a terrible job of trying to explain this). While I find this to be a workable solution, there are two issues that I have with it: 1. It requires an image and 2. I have a hard time working with percentages (its a personal problem, believe me).

Wouldn’t it be cooler if we could use the same syntax that’s used for multiple backgrounds? It could look like this:

box with 3 borders

Code:

.multiple-background-example-1 {
	border: 10px solid #77ccff, 10px solid #33bbff, 10px solid #0077ff, ;
}

For this to work each border would be rendered from the center out. and they would stack with no spacing between each border. I’m pretty sure this would save me time and effort (and who knows, maybe you too!). No image to produce, no messing with percentages to get the border just right, and no extra image for the browser to load.

For more on border-image: