Picture border radius

Hi

how can I change the image border radius on product images, I only want to set the bottom radius to 0px so its a flat bottom but still rounded up top ?

Hello,

Please try to use the below custom CSS code and paste it to Theme settings >> Custom CSS >> Global CSS code section:

.product-grid-item :is(.product-image-link,.hover-img) img {
     border-radius: 20px 20px 20px 20px;
}

Change the value as per your requirements.

Best Regards.

Hi Thanks

ive added this :

.product-grid-item :is(.product-image-link,.hover-img) img {
border-radius: 20px 20px 0px 0px;
}

but it still shows the container border 🙁

Bottoms perfect.

Attachments:

You must be logged in to view attached files.

Hello,

Please try to use the below custom CSS code and paste it to Theme settings >> Custom CSS >> Global CSS code section:

.archive .product-grid-item :is(.product-image-link,.hover-img) img {
    border-radius: 20px !important;
}

.archive .product-grid-item .product-wrapper {
    border-radius: 20px !important;
}

.archive .product-element-top {
	border-radius: 20px !important;
}

Change the value as per your requirements.

Best Regards.

That’s made the hole element have radius and the bottom of picture too.

Screenshot 1 is what I would like to achieve apart from the top corners still showing radius on the element.
(bottom of element flat (no radius)and bottom of picture flat (no radius).

Screenshot 2 is where I want no radius.

regards

Attachments:

You must be logged in to view attached files.

Hello,

Please share the WP admin login details of your site so I will check and solve the issue.

So you want only the rounded radius from the top of the product images not from the bottom?

Best Regards.

yes

login details attached

or if I set radius with rounding in theme settings everything changes apart from the bottom of the thumbnail image on product archives as I don’t like the whole thumbnail being rounded just the top

Hello,

Please try to use the below custom CSS code and paste it to Theme settings >> Custom CSS >> Global CSS code section:

.archive .product-grid-item .product-wrapper {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}
.product-grid-item :is(.product-image-link,.hover-img) img {
	 border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

Best Regards.

Perfect .. works a treat . I’ll just style my labels now and that’s that.

Thanks again

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts