背景剪辑混乱边界半径

Question

I have a box that has following CSS:

.box{
    background-clip: content-box;
    background-color: #FFEA27;
    border-radius: 4%;
} 

And the problem is that border radius is not being calculated correctly because of the background-clip: content-box; since border-radius calculates paddings also. At the end I get results like this: https://prnt.sc/n9gxpv

Let's look at the upper right corner for example. The rounding from right line to edge and from top line to edge is not equal and thus we I don't get perfectly round edge.

Is there any workaround for this. Like setting background color of a div without using background-color . Important this to say is that I cannot switch to margins from paddings and eliminate need for backgroud-clip attribute.

Answer 1

I made this simple workaround to fix it:

I made another div inside the current box and set it's width and height to 100% (so it takes the width and height of original element). Than I just set background color and border radius to inner element. Here is code example.

HTML:

<div class="box">
        <div class="innerBox">

        </div>
</div>

CSS:

.innerBox{
    width: 100%;
    height: 100%;
    border-radius: 2%;
    background-color: #1C1C1C;
}

Answer 2

Instead of using % as the unit, use pixel.

.box{
    background-clip: content-box;
    background-color: #FFEA27;
    border-radius: 4px;
} 

Works perfectly.