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?

TL;DR
  • Apply border radius directly to images or set parent div overflow to hidden.
  • Ensure consistent sizing and block display for both the image and parent div.
  • Test the changes on an iOS device to confirm the fix.

Border radius on a parent div may not always render properly in iOS. Here's how to ensure it displays correctly.

​

1. Apply Border Radius Directly to the Image

  • Check if the border radius effect is critical to your design. If yes, apply the border radius directly to the image itself rather than relying on the parent div.

​

2. Use Overflow Hidden on the Parent Div

  • Select the parent div containing your image.
  • Set its overflow property to hidden in the styles panel. This ensures that the child elements like images will adopt the parent’s border radius.

​

3. Update Image Display Settings

  • Ensure the image is set to display as block or inline-block to prevent any top or bottom spacing issues that may interfere with border display.

​

4. Apply Consistent Sizing

  • Make sure the parent div and the image are the same size. This can help in aligning the border radius correctly across devices.

​

5. Test on an iOS Device

  • Preview your Webflow project on an actual iOS device. This step is crucial to confirming that the border-radius issue has been resolved.

​

Summary

To fix border radius issues in iOS for images within a parent div in Webflow, apply the border radius directly to the image or use overflow hidden on the parent div along with consistent sizing. Test changes on an iOS device to ensure proper display.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can Webflow be used to clip an image using an SVG clipping mask without custom coding?
How can I dynamically change the background of every other item in a collection list in Webflow?
How can I fix the "Uncaught ReferenceError: $ is not defined" and "Uncaught SyntaxError: Unexpected token <" errors on my Webflow site?
How can I track the source URL of form submissions in Webflow to determine whether users are coming from Facebook ads or Google ads, after adding UTM parameters to the ads?
What is the structure and content of the provided Webflow code snippet?
Can I use a different favicon for specific pages in Webflow? If so, how can I accomplish this?
How can I make a div in Webflow fill the entire screen vertically and horizontally, including when using a height of 100% that is not working? I have already tried removing margins and padding with no success. Thank you for your assistance.
How can I fix the issue with Google PageSpeed where I have 1 blocking script resource and 4 blocking CSS resources causing a delay in rendering my Webflow page?
Can I design a site in Webflow with placeholder copy that clients can edit in while the site is still in development, and then revert back to static elements once all content is finalized and publish it as a normal website without incurring CMS costs?
Has anyone else experienced the issue where the background gradient on the "Body (All Pages)" tag in Webflow keeps repeating even after unchecking the 'repeat' checkbox?
Which CMS is the easiest to use and best to integrate with Webflow, allowing clients to easily make changes to text, images, and add blog posts without any loss in HTML/CSS/JS after exporting the design from Webflow?
How can I add a date and time picker to a simple Webflow form without using a CMS collection item?
Is it possible to create a dynamic list in Webflow and use it to link to Google Maps, similar to the hyperlink in the provided image?
Can multiple pixels be added to a website in addition to the Facebook Meta Pixel using Webflow? Thanks.
How can I create a full-width background video using a Vimeo embed without the controls and with autoplay, but without it being 100vw and 100vh in Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?