Posted about 5 years ago. Visible to the public.

CSS: Emulate borders with inset box shadows

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:

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. Avoid hacks like CSS3 PIE for older IEs because they only look good on paper.

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Author of this card:

Avatar
Henning Koch
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandropedia