Circle image border or outline

Hey team,

I added some images to my website and shaped them as circles. The background of the section is gold.

I would like to add a white border or outline to the images.

Can you please help me do that with CSS code.

https://revealtkd.squarespace.com

Password: adam

Thank you!

Website password is: adam

Hi. So what is the website URL or website name?

7 hours ago, joseph81 said:

Hi. So what is the website URL or website name?

https://revealtkd.squarespace.com

Password: adam 

[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 ! 

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?

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?

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.

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;
}

Hi @joseph81

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!

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?

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}