Create Multiple Borders in CSS3

5:23:00 PM |

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
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:
  1. 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:
  1. box-shadow:  
  2.     0 0 0 2px #000,  
  3.     0 0 0 3px #999,  
  4.     0 0 0 9px #fa0,  
  5.     0 0 0 10px #666,  
  6.     0 0 0 16px #fd0,  
  7.     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.