CSS - Box Shadow

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);