CODEWITHSUNDEEP
htmlcssborderbackground-color
Peter
Peter

Reputation: 1759

Border and background show up as different colors even when color values are same in CSS

Is it possible to make the color of the border the same as the background color? In my example, it should have the same color but the border color is always a bit darker than the background color.

.box {
    min-width: 50px;
    background: rgba(0, 0, 0, .2);
    border: 10px solid rgba(0, 0, 0, .2);
}
<div class="box">foo</div>

Upvotes: 33

Views: 6160

Answers (4)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

You should specify background-clip: padding-box; (or content-box) because, by default, this property is set to border-box thus the background also covers the area under the borders.

The effect you're obtaining is actually due to an overlapped transparency (with a full-solid colour you wouldn't notice the issue), so that's the reason you're seeing the border a bit darker than the background colour

.box {
    --bgcolor: rgba(0, 0, 0, .2);
    min-width: 50px;
    background: var(--bgcolor);
    background-clip:  padding-box;
    border: 10px solid var(--bgcolor);
}
<div class="box">foo</div>

Upvotes: 51

yevgeniy
yevgeniy

Reputation: 778

Or it can be another decision - just emulate your border by box-shadow

.box {
    min-width: 50px;
    background: rgba(0, 0, 0, .2);
    box-shadow:0 0 0 10px rgba(0, 0, 0, .2)
}

Upvotes: 5

Gomzy
Gomzy

Reputation: 431

you need not write any extra line

.box {
    min-width: 50px;
    background: rgba(0, 0, 0, .2);
    border:10px solid rgba(0, 0, 0, .0);
}
<div class="box">foo</div>

Upvotes: 3

David Wilkinson
David Wilkinson

Reputation: 5118

In addition to fcalderan's answer, you could also make the border-color transparent so the div's background color simply comes through:

.box {
    min-width: 50px;
    background: rgba(0, 0, 0, .2);
    border: 10px solid transparent;
}
<div class="box">foo</div>

Upvotes: 13

Related Questions