CSS Double Borders Using Box-Shadow

Every now and then you may come across a design that calls for double borders around an element. The “border” CSS property only gives you one border. Instead of wrapping your element in a div and applying another “border” property to it to give the effect of two borders, you can use the “box-shadow” CSS property and setting the thickness of one border to be larger than the other. Copy and paste the code below and adjust accordingly.
[cc lang=”css”]
box-shadow: 0 0 0 1px #ededed, 0 0 0 2px #dfdfdf;
[/cc]
Note: The “box-shadow” property doesn’t work in IE 8.