Remember the attribute list of box-shadow
is x-offset, y-offset, blur radius, shadow radius. You can emulate hard, solid borders by having a blur radius of zero. You can show or hide individual border sides by offsetting or scaling the shadow radius:
| With border
| With box-shadow
|
| border: 1px solid red
| box-shadow: inset 0 0 0 -1px red
|
| border-top: 1px solid red
| box-shadow: inset 0 1px 0 0 red
|
| border-right: 1px solid red
| box-shadow: inset -1px 0 0 red
|
| border-bottom: 1px solid red
| box-shadow: inset 0 -1px 0 0 red
|
| border-left: 1px solid red
| box-shadow: inset 1px 0 0 red
|
Real browsers and IE9+ understand box-shadow Show archive.org snapshot . Avoid hacks like CSS3 PIE for older IEs because they only look good on paper.