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:

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

Comments

[Pablo]

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

[panvicka]

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.