Bug 254151 – border-radius does not apply consistently to all corners of a child element across Safari for iOS and macOS

• Component: Layout and Rendering
• Status: NEW

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.

[Radar WebKit Bug Importer]

<rdar://problem/107262623>

[Ahmad Saleem]

Using codepen, I am able to reproduce the overlap on top corners in all browsers:

* Safari 16.5
* Chrome Canary 115
* Firefox Nightly 115

Since all browsers are working same, I am not sure, there is much to fix here.

Reduced Test case based on Comment 0 snippet: https://jsfiddle.net/nm96kqgf/show

@Alan - if you can have a quick look, I think it is just to confirm that there is nothing to fix here since all browsers are matching each other.

[Simon Fraser (smfr)]

This must be something about list item rendering. Putting `overflow:hidden` on the <li> fixes it, but I'm not sure why that's necessary.