Rounded Picture Corners in Label Theme

Hi all,

I am trying to get rounded corners for all product pictures and thumbnails in the label theme. I basically managed this by adding border-radius: 20px; to the responsive-image class. However, the rounded corners are not there anymore as soon as an image is zoomed on hover (e.g. in a featured collection block) and during the picture change on the product page.

Does anyone have an idea how I could achieve rounded corners at all times?

Thank you very much!

Hey there,

You were on the right track on this one. To have the rounded corners applied on hover as well, you can instead add the border-radius styling to the responsive-image-wrapper class that contains the images.

Replacing the responsive-image class with responsive-image-wrapper should resolve your issues.

Let us know if this helps :).

Hi! Thanks lot for the reply. I had actually tried the responsive-image-wrapper class before. It generally works, but comes with two issues:

  • first, when a product has multiple pictures and you click through them with the slide show arrow buttons, the original sharp corners appear again during the sliding transition.
  • second, the responsive-image-wrapper doesn’t seem to affect the collection gallery or a featured collection block.

adding a border-radius to the gallery-image-cropped class doesn’t seem to do anything. Is there any other class for that that I’m currently overlooking?

okay, for the second part concerning the gallery thumbnails I solved it now with the folowing selector:

.type-product-grid-item > .overflow-hidden {
  border-radius: 17px;
}

still, if there is a way to also have rounded corner while browsing through multiple product images, that would be great!

Hey @emc2,

As a workaround, the CSS below should maintain the rounded corners when browsing through product images:

#productSplide *:not(button){
border-radius: 10px !important;
}

Let us know if this helps.