[Solved] Border radius ugliness

[fooman]

I’m sure this is common and a dumb mistake on my part, but does anyone know why the rounded radius on the corner has a gross light line on the very edge?

Image to show the gross

As always, thank you to anyone who schools me!

[Paulie_D]

Anti-aliasing would be my guess.

Codepen to demo issue please?

[MDMueller]

I don’t know it, i may only guess:

The “overflow:hidden” red cuts off parts from the border of the .dialog-header (anti-aliasing) and therefore some color from the .dialog “leaks outside”.

You could try to avoid this by using a “hack” like this (to make sure the background of the .dialog-header is 1px larger)

.dialog {
  background-clip: content-box; 
  padding: 1px;
}

[Author]

Posts