DEV Community

Cover image for CSS: Fixing background color bleed in rounded corners
Rashid Shamloo
Rashid Shamloo

Posted on • Edited on

10

CSS: Fixing background color bleed in rounded corners

While doing one of frontendmentor.io's challenges, I encountered a weird artifact that happens when a nested div and its parent with different background colors, both have rounded corners which causes the background color of the parent div to bleed/show at the rounded corner:

CSS rounded corner color bleed

After searching, the answer seemed to be that:

  1. It's just an anti-aliasing issue and can't be helped.
  2. Using background-clip: padding-box; or overflow: hidden; which didn't work for me.

Since I just couldn't let it go and pretend it doesn't exist, I came up with three ways to fix the issue:

1. Avoiding the problem altogether!

Instead of having a nested div, put the divs on top of each other and position them with position: absolute;
This way, the parent div can have a shorter height and not be behind the rounded corners to begin with. but I like to avoid using absolute positioning as much as possible so...

2. Pushing the nested div to the bottom a little!

By moving the nested div to the bottom by a little amount like 0.1rem (using position: relative;), the anti-aliasing issue is fixed and no color bleed happens. but it messes up the spacing by 0.1rem so can't have that...

3. Removing the background color of the parent div from the affected area

By applying the background color only to the top part of the parent div we can solve this issue without moving stuff around. the best way to do it is using linear-gradient. for example linear-gradient(#color 0%, #color 50%, transparent 50%, transparent 100%); will apply the background color only to the top half of the parent div.

Live example

color bleed : https://colorbleed.netlify.app/
color bleed fixed using the 3rd method : https://colorbleedfix.netlify.app/

You can check the source of this challenge on my GitHub

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (2)

Collapse
 
pablowbk profile image
Pablo

just bumped into this problem at work today, thanks for posting!

Collapse
 
panvicka profile image
panvicka • Edited

I had the same problem few weeks ago (only in Chrome, Firefox & Safari were ok), but with an overlay, which was only visible on hover. The overlay was semi-transparent so I could not remove the background color from the parent... So for me it was the option one after spending quite a lot of time playing with the other options - which all had some kind of unwanted side-effect for me.

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay