Jump to content

Adding Image Border Radius (+ Outline)

Go to solution Solved by Lesum,

Recommended Posts

Hi, I am trying to use  css to make it so every image on my website has a border radius of 30px plus a 1.5px black outline with the same radius. I used the code below, but it has only added a radius to the outline, not the image itself. Is there a different property for the image itself that I need to use? Thank you!

.sqs-block-image {
      border: 1.5px solid black !important;
      border-radius: 30px;
}

Screenshot 2024-07-09 at 1.13.25 PM.png

Link to comment
  • Solution

@ellen_b Hi! You can add this code under Website > Pages > Website Tools > Custom CSS to add a site wide border radius and outline on images.

.sqs-image img {
  border-radius: 30px;
}
.content-fill::after, .content-fit::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  border: 1.5px solid #000;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
Posted (edited)

@Lesum Success! Thanks so much. 

One follow up question: Is it possible to exclude a few specific image blocks from this styling? I've started adding in a few collage-type images that don't work with the outline. The majority of the images across the site I do want the radius and outline. It's just maybe 4-5 image site-wide that I'd like to exclude.

Sorry to complicate things 🤪 and thank you so much for your help.

Screenshot 2024-07-09 at 4.03.23 PM.png

Edited by ellen_b
Link to comment
Posted (edited)

You're correct. The code in my previous comment applies to images added with image block only

For summary block, you can add this code:

.summary-thumbnail {
    border-radius: 30px;
    border: 1.5px solid #000;
}

For blog item thumbnails, you can add this code:

.blog-item a.image-wrapper {
    border-radius: 30px;
    border: 1.5px solid #000;
}

For products block,

.products .grid-image-wrapper {
    border-radius: 30px;
    border: 1.5px solid #000;
}

For individual product page,

/* Product slides image */
.ProductItem-gallery {
  border: 1.5px solid #000;
  border-radius: 30px;
}

/* Product thumbnail image */
.ProductItem-gallery-thumbnails-item {
  margin-right: 1.5px;
}

img.ProductItem-gallery-thumbnails-item-image {
  border-radius: 30px;
  border: 1.5px solid #000;
}

Let me know if I missed anything else. Thanks!

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@ellen_b You can add this code. For any images you want to exclude, just add their block ID followed by a comma.

#block-yui_3_17_2_1_1720561014139_90469, #block-yui_3_17_2_1_1720561014139_93451, #block-yui_3_17_2_1_1720561014139_95938, #block-yui_3_17_2_1_1720561014139_99079 {
  .content-fill::after, .content-fit::after {
    display: none !important;
  }
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Lesum I'm back again on this one. 😬 I just saw the list of all the CSS for adding borders and radius on images in a bunch of different places. Thank you so much! 

I've applied them all and have a few follow-up questions:

1. On the individual shop page, the outlines are doing something funny... They aren't appearing on the right side only. (See screenshot).

2. Is it possible to add this styling to images that appear within an individual blog post? I know that is not fluid editor in there so maybe it works differently.

3. Finally, I've added an Instagram feed to the homepage and the styling isn't working quite right there. The outline shows up but the radius isn't applying. 

The website url again is: https://thesucculentstudio.squarespace.com/?password=new

If you have any tips I would really appreciate it! Will happily send another coffee your way 🙂

Screenshot 2024-07-10 at 2.49.11 PM.png

Screenshot 2024-07-10 at 3.13.22 PM.png

Link to comment

@ellen_b Hi! You can remove the previous code for individual product pages and add the following:

For individual product page:

.ProductItem-gallery {
   border: 1.5px solid #000;
   border-radius: 30px;
}

.sqs-image-shape-container-element {
  border-radius: 30px;
}

For instagram block:

.instagram-block img {
    border-radius: 30px;
}

For individual blog post page:

.sqs-image-shape-container-element::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    border: 1.5px solid #000;
}

 

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
Posted (edited)

THANK YOU @Lesum!! 

The only place remaining where it isn't working is when I insert one single product block into a regular page. This is the code that I thought would target that, but maybe I'm misunderstanding? Maybe that selector is for a summary block of products?

/* Product blocks */

.products .grid-image-wrapper {

     border-radius: 30px;

     border: 1.5px solid #000;

}

https://thesucculentstudio.squarespace.com/?password=new

Screenshot 2024-07-11 at 11.22.19 AM.png

Edited by ellen_b
Link to comment

@ellen_b Hey, the code you mentioned was for product collection pages. For a product block on a regular page, you can add this code:

.product-block img {
  border-radius: 30px;
  border: 1.5px solid #000;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@ellen_b Not related to the code, but on mobile, the product gallery images on individual product pages add spacing differently. You can use this code to address the issue:

@media screen and (max-width: 767px) {
    #pdp .ProductItem-gallery {
      margin-bottom: 25px !important;
      padding-bottom: 0 !important;
    }
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Lesum I ran into one more little snag with this one. I've found that if a product gallery only has one image (as opposed to a multi-image carousel) the border doesn't fit quite right. Maybe a further adjustment I need to make to the padding? (See screenshot)

Single Image Product (doesn't fit)
https://thesucculentstudio.squarespace.com/shop/p/4-inch-succulent-arrangement

Multi-Image Product (fits)
https://thesucculentstudio.squarespace.com/shop/p/disco-ball-succulent-arrangement

Demo Site Password: "new"

Any ideas? Thank you!

Screenshot 2024-07-17 at 2.21.46 PM.png

Link to comment

@ellen_b Hi! You can add this code to ensure that product images inside a gallery always fit.

#pdp img.ProductItem-gallery-slides-item-image {
    object-fit: cover !important;
    object-position: center center !important;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.