How to Create Multiple Borders in CSS3

The CSS2.1 border property has served us well but it’s a little basic. What if you require two or more borders in different colors? The CSS3 border-image property is an option but it still requires Photoshopping shenanigans and the syntax is quite complex. However, if you simply need a series of solid-color borders, there is an easier alternative: the box-shadow property.

CSS3 Multiple Borders

View the multiple border demonstration page…

box-shadow has six arguments:

  1. inset: (optional) if defined, the shadow will appear inside the element.
  2. horizontal: the x distance from the element
  3. vertical: the y distance from the element
  4. blur: (optional) the blur radius, i.e. 0 for no blur
  5. spread: (optional) the distance the shadow spreads, i.e. 1px extends the shadow 1 pixel in all directions so it’s 2px wider and taller than the parent element
  6. color: the shadow color

The little-used spread argument can be used to create a border. For example, a 1 pixel solid black border can be created using no blur and a 1px spread:

box-shadow: 0 0 0 1px #000;

Unlike the border property, box-shadow permits multiple shadows separated with a comma. The last shadow defined sits at the bottom of the stack so, to create the box shown above, we use this code:

box-shadow: 
	0 0 0 2px #000,
	0 0 0 3px #999,
	0 0 0 9px #fa0,
	0 0 0 10px #666,
	0 0 0 16px #fd0,
	0 0 0 18px #000;

Note:

  • The effect works in all the latest browsers including IE9.
  • It can be combined with border-radius but remember that the radius is applied to the inner element so the outer shadows extrude accordingly.
  • Unlike a real border, box-shadow does not require space so the effect will flow under other elements.

Some will consider it a hack, but it’s an quick solution for multiple borders which doesn’t require images.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.itmitica.com/en/ IT Mitică

    Actually, with a little imagination, this one can lead to pretty impressive stuff. The way I see it, you can position “clones” that can be positioned pretty much anywhere around, having different colors and transparency levels.

    This one might be something really underexploited so far.

    • http://www.optimalworks.net/ Craig Buckler

      I think so. The x and y offsets allow you to position multiple “shadows” anywhere on the page. I’m sure someone with more imagination than me will find a novel use for the effect!…

  • Guest

    Use Fireworks, it is designed for web. Photoshop is really bad option for web development.

    • http://www.optimalworks.net/ Craig Buckler

      I say: use whatever you’re happy with.

  • http://www.stpauljcc.org Richard

    I’ve been trying to understand the “box-shadow” element, but I’m not well-versed enough in CSS to figure out how to implement it. Do I just put it between tags in the header section? I tried that
    but it doesn’t do anything. Can you help?

  • http://gauravmishra.com Gaurav M

    impressive!
    will remember it is a Neon Billboard

  • Mike

    Surely irrelevant, at least for another 3 years I’d say. You still have to create image borders for the most popular browsers IE7, IE8. Where is the fall back?

    • http://www.optimalworks.net/ Craig Buckler

      The fallback is the standard border property. You can then apply further colored borders using box-shadow for modern browsers. Besides, the effect is purely cosmetic. IE6/7/8 shouldn’t matter unless you’re heading down the pixel-perfection route (a dangerous road with potholes and lethal corners).

  • http://www.impressivewebs.com Louis

    I actually posted an article a little while ago listing 5 ways to achieve multiple borders, including box shadow:

    http://www.impressivewebs.com/multiple-borders-css/

    • http://www.onsman.com Ricky Onsman

      Louis, you have to get your articles published here, where we can see them!

  • Thomas

    Nice work Craig. Thank you for sharing.

  • http://Techreuters.com Dheeraj Bansal

    This is really awesome I will definitely try it out on my project designs layout

  • Jason M

    You can actually achieve multiple borders without CSS3, so it will work even on IE6. The trick is to make a div, pad it however many pixels you want the border, then just make the background color how you want. That simple. I found it works very well when you stack them and so far it has worked in older browsers that don’t support box-shadows.

    • http://www.optimalworks.net/ Craig Buckler

      You can, but it’s not very semantic – you’re adding content for the purposes of styling. Besides, it leads to DIVitis which is a particularly nasty condition. Finally, it’s not very flexible – to create a new border style, you need to change both the HTML and CSS. Personally, I wouldn’t bother for the sake of IE6 users.

      • Jason M

        Very true, but still there are a large number of IE7 and 8 users who I’d like my design to reach out too (at what it’s suppose to actually look like). So far though, the design I’ve been doing it on (I do it twice in the entire layout), it has worked in all browsers that I’ve tested. It might not be the cleanest code, but it’s not a theme anybody is going to change.