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; } adamspicar and tuanphan 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment