Webkit button: background color overflows round corners

StackOverflow https://stackoverflow.com/questions/1971791

  •  21-09-2019
  •  | 
  •  

Question

I'm trying to make a rounded button using -webkit-border-radius

This gives me this button (in Safari):

round corner with background color

You can see that the background color overflows in the rounding. I tried changing border size and radius, but it doesn't help. Is this a rendering bug with Safari or something?

Was it helpful?

Solution

It's addressed here on http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed?d1dc0f00 Mike Harding's blog:

-webkit-background-clip: padding-box;

OTHER TIPS

Looks like this is a rendering bug with WebKit. Adam Betts on Twitter:

We're at Safari 5 and border-radius artifacts is still here. Why isn't this fixed already? http://lensco.be/test/border-radius-artifacts/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top