Bug 254151

Created attachment 465516 [details]
Screenshot of a webpage where an element has a border-radius, but the element within inherits rounded corners at the top, but not at the bottom of the element.

When applying a border-radius to an element, the content within will overlap causing the rounded corners to look untidy and only occurs with the top two corners.

On Desktop, this can be overcome by enabling overflow: hidden and in the example Pen linked to, after toggling it once the border-radius can no longer be broken out from.

https://codepen.io/cchana/pen/oNPPwVj?editors=1111

This is the basic HTML and CSS required to replicate the issue:

    <ul>
      <li><img src="https://www.goodgear.club/images/items/256/timex-waterbury-classic-chronograh-40mm.jpg" /></li>
    </ul>

    li {
      border: 2px solid red;
      border-radius: 10px;
      width: fit-content;
    }

I originally began digging into this issue because my example using grid had this issue on Safari for iOS where it actually affects the bottom corners. Applying the overflow:hidden does not make any difference in Safari for iOS. The attached image shows the bottom corners with the element overlapping the outer element that has border-radius applied, but the top corners are not affected.

I have provided an example with an image, but this applies to any element and that includes the ::before and ::after pseudo-elements.