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.
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;
}
Instead of using % as the unit, use pixel.
.box{
background-clip: content-box;
background-color: #FFEA27;
border-radius: 4px;
}
Works perfectly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.