How can I fix the issue with border radius not displaying properly on iOS when applied to a parent div instead of the image itself in Webflow?

iOS sometimes ignores border-radius on a parent div when applied to an img inside it. Here’s how to fix it in Webflow:

Solution 1: Apply border-radius Directly to the Image

• Select the image inside the parent div.
• Apply the same border-radius as the parent container.
• Set overflow: hidden on the parent div to ensure clipping.

Solution 2: Use object-fit for Responsive Images

• Ensure the img has width: 100% and height: 100%.
• Set object-fit: cover to maintain aspect ratio.
• Apply overflow: hidden to the parent div.

Solution 3: Convert the Image to a Background Image

• Remove the img tag.
• Set the parent div's background as the image (via Background settings).
• Apply border-radius to the div.

Summary

If border-radius isn't working correctly on iOS, apply it directly to the img or use a background image. Also, ensure overflow: hidden on the parent to enforce clipping.