Jump to content

Border radius outline not working on mobile

Go to solution Solved by GROCreativeStudio,

Recommended Posts

#block-4a001f40286d8404a12a {
border-radius: 30px 30px 30px 30px;
outline: solid 2px #887569}

This is the code I used for the image that pairs with my "The Website in a Week" package on my web design service page. It's showing up perfectly fine in the mobile display within Squarespace, but when I check the live site on my phone, the border outline isn't rounded to match the image (attached a screenshot). My image is set to fill and the corner radius within fluid engine is set to 30px.

B5E5AA61-1787-4814-B6DE-69F716A58D97.jpeg

Link to comment
#block-4a001f40286d8404a12a {
border-radius: 32px;
border: solid 2px #887569}

Here's the final code. I ended up adding 2px to the border radius in the code so there wasn't a gap in the corners.

So you'd set the image design within Squarespace's fluid engine to fill and edit the corner radius to 30px, then paste the above code in the custom CSS section.

Hope this helps you if you're currently trying to solve this problem! 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.