Adding Image Border Radius (+ Outline)

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

.image-block {
 border-radius: 25px 25px 25px 25px;

]

@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.

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!

@ellen_b Can you share the site URL? Also please let me know which images to exclude. 

@Lesum Here is the url: https://thesucculentstudio.squarespace.com/?password=new

I haven't finished designing so all the final images aren't in there yet. But for testing purposes, you could use:

#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

Thank you!

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

@Lesum Woww, you are a code hero! Are you available to hire hourly for coding assistance by any chance?

21 minutes ago, ellen_b said:

@Lesum Woww, you are a code hero! Are you available to hire hourly for coding assistance by any chance?

Thank you! 😊. Just sent you a message.

@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 🙂

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

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

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

@Lesum That worked! Thank you!

Now I am noticing this happening on the product gallery on mobile... 🤔 And that product title is so close to the bottom of the image. Not sure if that's related?

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

@Lesum Amazing, thank you!

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

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

@Lesum Woohoo! Success 🙌🏻

Hello again @Lesum!

I just connected a different Instagram account to this website I've been working on and unfortunately, it caused me to lose the radius on the Instagram feed again. At least on all but the first photo? 🤔 I tried deleting this part of the CSS and adding it back without success:

/* Instagram block images */

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

Maybe there is a different selector I should be using? 

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

Do you have any ideas? Thank you so much!

@ellen_b Hi! You can add this code to address the border radius issues in the Instagram feed.

.instagram-block .sqs-video-wrapper .sqs-video-overlay {
  border-radius: 30px;
}

.instagram-block a.image-slide-anchor.content-fill {
  border-radius: 30px;
}

@Lesum Amazing! Thanks yet again!