Bottom borders not rounded on mobile

Hi,

So I have a site where I used border bottom to create some rounded divider lines but I noticed on my iPhone the borders are not being rendered square instead of round. Anyone know what causes this and whether it can be fixed?

On desktop:
00%20PM

On Mobile:
53%20PM

Thanks,
Ben

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Benni,

Can you share a read-only link?

The website is: everbaby.me

Hi @bbmettler,

A share link will help us review your project and provide better answers for you. You can find out how to provide a share link here: Loom | Free Screen & Video Recording Software | Loom

TIA, Brandon

1 Like

Here you go:

https://preview.webflow.com/preview/everbaby?utm_medium=preview_link&utm_source=dashboard&utm_content=everbaby&preview=2083cdd3e0ffabac1ff8f5ee651925f9&mode=preview

I think that the iPhone engine is rendering a dotted border this way…

This article mentions browsers and not OS, nevertheless, I believe that is the issue.

Solution- Use SVG? could be also inline SVG

1 Like

Cool that should work. Thanks for your help!

1 Like