By Craig Buckler

How to Create Multiple Borders in CSS3

By Craig Buckler
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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:

	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;


  • 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.

Login or Create Account to Comment
Login Create Account
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?