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: Basically overpaint the radius part at the bottom. And you need to go the inverse (to top instead to bottom direction)
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: Basically overpaint the radius part at the bottom. And you need to go the inverse (to top instead to bottom direction)
17 Replies
increase the scale of the child ny a littlr
like
scale : 1.1Hm, no. this doesn't work: https://codepen.io/Christian-Lorenz/pen/PoVMaKm
cause u have overflow hidden
perhaps add a box shadow with inset
If they remove it, wouldn’t it be rectangle
why not put the border radius on the child
Why not just making border transparent tbh
if not then try with pseudo elements
try it ig
well u dont have any border
try pseudo elements
is he trying to make two block elements have same border radius?
also is it necessary to give the parent a bg color??
That’s what I also thought of
Just make it transparent and all good
Make the child element full width
Problem most likely solved
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
I also questioned why he is keep to telling me “you” skhdndd
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
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.
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....