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

Question

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>

Hollie

It is the same color, it's just overlapping. – Hebrew

Or use a padding instead of a border. – Polygamist

Answer 1

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>

Scour

Answer 2

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>

Pallette

Isn't the 10px redundant when its transparent? – Hollie

No, if you inspect the element you'll see the border is still physically there, it's just literally trasnparent :-) – Pallette

Yeah, thats what I meant. But your right, physically the border is still there. :) – Hollie

Yep, just another way of achieving a similar result - there's always more than one way to skin a cat! – Pallette

Answer 3

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)
}

Unintentional

Answer 4

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>

Thereafter