Return to previous page

How to apply border rounding to all images on the site/

This topic has 4 replies, 2 voices, and was last updated 1 months, 3 weeks ago ago by Rose Tyler

Goostaf

Participant

September 26, 2024 at 10:58

How to apply border rounding to all images on the site, we try in css .img {border-radius:15px;} but it doesn’t work

Files is visible for topic creator and
support staff only.

#415932 Copied

3 Answers
Rose Tyler

Support staff

September 26, 2024 at 11:53
Hello, Goostaf,

To apply border rounding to all images on the site, please follow these steps:
1. Check the CSS selectors:
Sometimes other styles override your CSS code. Ensure you’re using the correct selector for all
images on the site. You can apply a more specific selector or use !important to force the style.
Here is an example to apply rounded corners to all images: img {
border-radius: 15px !important; }
2. Check for other styles:
In your example, we see that the image already has the style border-radius: 15px !important. Make
sure the styles apply to all images and are not being overridden by other CSS rules.
3. Conflict with theme or plugin styles:
It is possible that other CSS files or even JavaScript are altering the style of your images. Use the
browser’s developer tools (as shown in your screenshot) to check if other styles are overriding your rule. If other styles are overriding it, use more specific selectors or add !important to your rule.
4. Caching:
After making changes to the CSS, don’t forget to clear your site’s cache and browser cache,
especially if you’re using caching plugins.

Here’s a possible solution:
If you need to apply rounded corners to all images on the site, including WooCommerce and other specific blocks, you can use this rule:
```
img, .attachment-woocommerce_single, .attachment-shop_thumbnail, .woocommerce-product-gallery__image img {
border-radius: 15px !important; }
```
This rule will cover all standard images and specific WooCommerce product images.
Please try this and make sure to clear the cache if the changes do not reflect immediately.

Warm Regards,
The 8Theme Team
#415945 Copied
Goostaf

Participant

September 26, 2024 at 11:57

Thanks, I removed the dot before .img {
border-radius: 15px !important; } and everything worked too 🙂

#415947 Copied

Rose Tyler

Support staff

September 26, 2024 at 11:58

Hello, Goostaf,

You’re welcome!

Warm Regards,
The 8Theme Team

#415948 Copied
Tagged: customize woocommerce, image border rounding, website design, website images, woocommerce wordpress themes, wordpress image styling
Viewing 4 results - 1 through 4 (of 4 total)

The issue related to '‘How to apply border rounding to all images on the site/’' has been successfully resolved, and the topic is now closed for further responses

How to apply border rounding to all images on the site/

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection