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

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>