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
  • 4 months later...
On 3/28/2023 at 12:28 PM, Stacey_anne said:

 

Could you help me make this code work for me? I'm trying to add borders to images with corner radii. Here are my site details:

https://onion-mouse-9rsa.squarespace.com/
Password: awaken 

I've seen it done on this site:

https://www.tropicstatepilates.com.au/about

but I am not adept enough with code to figure out how the designer did it 

Thanks!

 

Hi,

It looks like you figured it out?

image.thumb.png.71ffaa6d7939269a08fee819d62cfa0d.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

I wish I had 😉

All the images on the site have been uploaded with the borders created in Canva. I'd still like to learn how to do it using CSS. This code works for radius corners but I can't get it to work for shapes and circles without a lot of messing around (and even then it still doesn't work well)

{ border-radius: 32px;
border: solid 1px #000}
 

 

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.