Read more

CSS: Emulate borders with inset box shadows

Henning Koch
October 19, 2012Software engineer at makandra GmbH

When is this useful?

  • When both parent and child elements have borders, with this technique you don't get two borders (which looks ugly). This is because child elements are rendered over inset box shadows, not inside inset box shadows.
  • You want more than one border on the same element. You can have as many inset box shadows on the same element as you like, e.g. allowing you to make a picture-frame-like border.

Examples

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:

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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

Caveats

  • Box shadows render slower than borders.

Compatibility

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.

Posted by Henning Koch to makandra dev (2012-10-19 14:09)