Can you apply a background color to the element that does not apply to the border? (CSS)

advertisements

In CSS3, is it possible to apply a background color to an element that does not get applied to the border?

When you use:

element { background: red; }

the background color gets applied to the border area as well.


Yes

Using background-clip - MDN Link

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

  • border-box

The background extends to the outside edge of the border (but underneath the border in z-ordering).

  • padding-box

No background is drawn below the border (background extends to the outside edge of the padding).

  • content-box

The background is painted within (clipped to) the content box.

p {
  border: 10px navy;
  border-style: dotted double;
  margin: 1em;
  padding: 1em;
  background: #F8D575;
}
.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}
<p class="border-box">The yellow background extends behind the border.</p>
<p class="padding-box">The yellow background extends to the inside edge of the border.</p>
<p class="content-box">The yellow background extends only to the edge of the content box.</p>