Jump to content

Circle image border or outline

Recommended Posts

23 minutes ago, joseph81 said:
[data-section-id="635cabf5c1c7b62bd3d9835e"] .fluid-image-container {
   border-radius: 50%;
   overflow: hidden;
   outline: 4px solid #ffff;
}

Also you need to remove the clip-path from the fluid-image-container ! 

Hi Joseph, thank you for the answer.

The code didn't work. When you say remove the clip-path from the image container... do you mean I need to upload just a circular image and not use internal Design>Shape feature?

Screenshot 2022-10-30 at 2.14.15 PM.png

Edited by adamspicar
Link to comment
18 minutes ago, adamspicar said:

Hi Joseph, thank you for the answer.

The code didn't work. When you say remove the clip-path from the image container... do you mean I need to upload just a circular image and not use internal Design>Shape feature?

Screenshot 2022-10-30 at 2.14.15 PM.png

Okay, it worked somewhat when I uploaded circular PNG image file. It still is, however, not very precise on top and bottom of the image.

Screenshot 2022-10-30 at 2.26.50 PM.png

Screenshot 2022-10-30 at 2.31.31 PM.png

Link to comment

No, I meant you need to reset the clip-path rule in css. 

[data-section-id="635cabf5c1c7b62bd3d9835e"] .fluid-image-container {
   border-radius: 50%;
   overflow: hidden;
   outline: 4px solid #ffff;
   clip-path: none!important;
}

 

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

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.