adamspicar Posted October 30, 2022 Share Posted October 30, 2022 (edited) 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 Edited October 30, 2022 by adamspicar Link to comment
joseph81 Posted October 30, 2022 Share Posted October 30, 2022 Hi. So what is the website URL or website name? Jozsef Kerekes - Front-end developer and Squarespace enthusiast My Blog: https://ui-workarounds.comIf you like my answer, please give me an upvote/like. Highly appreciated. Link to comment
adamspicar Posted October 30, 2022 Author Share Posted October 30, 2022 (edited) 7 hours ago, joseph81 said: Hi. So what is the website URL or website name? https://revealtkd.squarespace.com Password: adam Edited October 30, 2022 by adamspicar Link to comment
joseph81 Posted October 30, 2022 Share Posted October 30, 2022 [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 ! Jozsef Kerekes - Front-end developer and Squarespace enthusiast My Blog: https://ui-workarounds.comIf you like my answer, please give me an upvote/like. Highly appreciated. Link to comment
adamspicar Posted October 30, 2022 Author Share Posted October 30, 2022 (edited) 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? Edited October 30, 2022 by adamspicar Link to comment
adamspicar Posted October 30, 2022 Author Share Posted October 30, 2022 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. Link to comment
joseph81 Posted October 30, 2022 Share Posted October 30, 2022 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; } tuanphan and adamspicar 1 1 Jozsef Kerekes - Front-end developer and Squarespace enthusiast My Blog: https://ui-workarounds.comIf you like my answer, please give me an upvote/like. Highly appreciated. Link to comment
Stacey_anne Posted March 28 Share Posted March 28 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! Link to comment
tuanphan Posted April 2 Share Posted April 2 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Stacey_anne Posted April 3 Share Posted April 3 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment