Is there a way to prevent these border-radius shine-through's?

So, like in the screenshot: you've got a dark background, inside it a light element with a border-radius and overflow:hidden And inside this element another one with a different background color (or an image). And the mask doesn't really fit the radius but you get these 1px background colored border lines.
I just saw a "solution" to paint this over / blur away on stackoverflow, which really just works in a few cases. Isn't there another way? Only well-I-dont-know solution I found so far:
border-radius: 2rem;
background: linear-gradient(to top, blue 2rem, #fff 2rem);
border-radius: 2rem;
background: linear-gradient(to top, blue 2rem, #fff 2rem);
Basically overpaint the radius part at the bottom. And you need to go the inverse (to top instead to bottom direction)
No description
17 Replies
glutonium
glutonium12mo ago
increase the scale of the child ny a littlr like scale : 1.1
glutonium
glutonium12mo ago
cause u have overflow hidden perhaps add a box shadow with inset
Neσ许
Neσ许12mo ago
If they remove it, wouldn’t it be rectangle
glutonium
glutonium12mo ago
why not put the border radius on the child
Neσ许
Neσ许12mo ago
Why not just making border transparent tbh
glutonium
glutonium12mo ago
if not then try with pseudo elements try it ig well u dont have any border try pseudo elements
Neσ许
Neσ许12mo ago
is he trying to make two block elements have same border radius?
glutonium
glutonium12mo ago
also is it necessary to give the parent a bg color??
Neσ许
Neσ许12mo ago
That’s what I also thought of Just make it transparent and all good Make the child element full width Problem most likely solved
glutonium
glutonium12mo ago
oh wait i thought i was talking to the person who made the form lmao u went "is he.." i went "he?? he who??" 😂 ya indeed
Neσ许
Neσ许12mo ago
I also questioned why he is keep to telling me “you” skhdndd
glutonium
glutonium12mo ago
lmao one way ig would work is if u wrap the whole thing in another div and give that div an overflow of hidden and a border radius and no bg nah nvm, doesnt work lmao
bibamann
bibamannOP12mo ago
WTF 😄 So what I'm doing here are cards with a rounded border which should be the same height - so I do it with flex or grid. the base card background is white, the body bg dark, but a different color like an image on top or buttons on bottom. And there you can see some pixels of the white shining through (because of browser rounding-errors or so I heard). And on bigger monitors / lower resolutions these pixels really shine through. And I'm asking if there's some kind of fix for this.
No description
capt_uhu
capt_uhu12mo ago
have had luck using clip-path: inset() to deal with this kinda thing in the past. So something like clip-path: inset(0 round 2rem); on the container. But yeah this issue has been around since border-radius was added and none of the browsers seem to have made any progress on a fix....
MarkBoots
MarkBoots12mo ago
in this case, this would work
--background: white;
--border-radius: 2rem;
border-radius: var(--border-radius);
background: linear-gradient(
transparent var(--border-radius),
var(--background) 0 calc(100% - var(--border-radius)),
transparent 0
);
--background: white;
--border-radius: 2rem;
border-radius: var(--border-radius);
background: linear-gradient(
transparent var(--border-radius),
var(--background) 0 calc(100% - var(--border-radius)),
transparent 0
);
bibamann
bibamannOP12mo ago
Hm, yes. This is basically my attempt in my initial post. but I struggled with the calc to get it transparent / filled on top and bottom. so thanks for this!
Want results from more Discord servers?
Add your server