title: Background-clip messes with border-radius
body: <p>I have a box that has following CSS:</p>
  
  <pre><code>.box{
      background-clip: content-box;
      background-color: #FFEA27;
      border-radius: 4%;
  } 
  </code></pre>
  
  <p>And the problem is that border radius is not being calculated correctly because of the <code>background-clip: content-box;</code> since <code>border-radius</code> calculates paddings also. At the end I get results like this: <a href="https://prnt.sc/n9gxpv" rel="nofollow noreferrer">https://prnt.sc/n9gxpv</a></p>
  
  <p>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.</p>
  
  <p>Is there any workaround for this. Like setting background color of a div without using <code>background-color</code>. Important this to say is that I cannot switch to margins from paddings and eliminate need for <code>backgroud-clip</code> attribute.</p>