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>

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 a transparency overlapping (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 {      min-width: 50px;      background: rgba(0, 0, 0, .2);      background-clip:  padding-box;      border: 10px solid rgba(0, 0, 0, .2);  }

<div class="box">foo</div>