CODEWITHSUNDEEP
cssbackgroundborder
Amazon Dies In Darkness
Amazon Dies In Darkness

Reputation: 5833

Possible to apply a background color to element that does not get applied to border? (CSS)

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.

Upvotes: 0

Views: 64

Answers (2)

Raha MK
Raha MK

Reputation: 102

Simply use:

element { background: red; border-color:black; }

Upvotes: -1

Paulie_D
Paulie_D

Reputation: 115288

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>

Upvotes: 2

Related Questions