CSS3 box-shadow (and it’s vendor-specific subsets) can be used with 0 blur to create an additional inner or outer border along one side.
This can be useful for creating inset or outset type effects.
The standard CSS border-style declaration of double produces a single line of the defined color and a single line that’s transparent – seldom the intention of the author.
For an outer border:
-moz-box-shadow: #FFF 0 1px 0 0; -webkit-box-shadow: #FFF 0 1px 0 0; box-shadow: #FFF 0 1px 0 0;
For an inner border:
-moz-box-shadow: inset #B3B3B3 0 -1px 0 0; -webkit-box-shadow: inset #B3B3B3 0 -1px 0 0; box-shadow: inset #B3B3B3 0 -1px 0 0;
<!DOCTYPE html> <html> <head> <style type="text/css"> body { margin: 10px; background: #FAFAFA; } .inner-border { border-bottom: 1px solid #FFF; -moz-box-shadow: inset #B3B3B3 0 -1px 0 0; -webkit-box-shadow: inset #B3B3B3 0 -1px 0 0; box-shadow: inset #B3B3B3 0 -1px 0 0; } .outer-border { border-bottom: 1px solid #B3B3B3; -moz-box-shadow: #FFF 0 1px 0 0; -webkit-box-shadow: #FFF 0 1px 0 0; box-shadow: #FFF 0 1px 0 0; } </style> </head> <body> <div class="inner-border">Test</div> <div class="outer-border">Test 2</div> </body> </html>
result:
NOTE: This might help when dealing with i.e.
filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3);