A store owner is experiencing a CSS styling issue where product card images have rounded corners, but the “Sale 50%” badge overlaying them retains square corners, creating a visual inconsistency.
Problem Details:
Proposed Solution:
A CSS fix was suggested targeting the sale badge element:
.sale-badge {
border-radius: 8px;
padding: 5px 10px;
}
This would apply matching rounded corners to the badge, creating visual consistency with the underlying product image styling.
Hello Everyone, I have an online store website in which on the product cards (see attached photo below) I have made the product image with rounded corners but where it says sale 50% on each product image (circled in yellow) it does not have rounded square corners and it is looking really awkward so I was wondering if someone could help me out, Thanks!
MY STORE WEBSITE: www.gadget-pods.store
.sale-badge {
border-radius: 8px;
padding: 5px 10px;
}