Kevin Powell - Community•11mo ago

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)

17 Replies

glutonium•11mo ago

increase the scale of the child ny a littlr like scale : 1.1

bibamann•11mo ago

Hm, no. this doesn't work: https://codepen.io/Christian-Lorenz/pen/PoVMaKm

Christian Lorenz

CodePen

PoVMaKm

...

glutonium•11mo ago

cause u have overflow hidden perhaps add a box shadow with inset

Neσ许•11mo ago

If they remove it, wouldn’t it be rectangle

glutonium•11mo ago

why not put the border radius on the child

Neσ许•11mo ago

Why not just making border transparent tbh

glutonium•11mo ago

if not then try with pseudo elements try it ig well u dont have any border try pseudo elements

Neσ许•11mo ago

is he trying to make two block elements have same border radius?

glutonium•11mo ago

also is it necessary to give the parent a bg color??

Neσ许•11mo 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•11mo 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σ许•11mo ago

I also questioned why he is keep to telling me “you” skhdndd

glutonium•11mo 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•11mo 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.

capt_uhu•11mo 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•11mo 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•11mo 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!

Gaming

Programming

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