1 min read

Using background-clip for transparent borders

This technique allows the background behind the element to be seen instead of the background of the element itself.

You can use rgba(0,0,0,0.2) values when you want a border that appears to inherit an element’s background colour; but if the element itself has a light background and it’s sitting on a darker background, you can end up with a ‘fuzzy’ effect where the contrast between isn’t visually distinguished enough.

In comes the background-clip property which allows you to tell the element how to paint the background.

The technique is usually used for lightboxes to show the content behind, through the border. Below you can see a more pronounced example.

See the Pen jamoh by Craig Dennis (@craigmdennis) on CodePen.

By using background-clip: padding-box; you’re only painting the background to the boundary of the padding; and seeing as borders are drawn outside of the padding, you end up with an rgba() border that shows on top of whatever is behind the element rather than the background of the element itself.

Support for background clip is pretty good with the usual suspects not supporting it (IE8 and below).

Posted