Safari中的CSS圆角圆角

Question

I'm trying to make a round button using css with these attributes:

width: 60px;
height: 60px;
color: #5A5A5A;
border-radius: 50%;
border: 2px solid;
display: inline-block;

The result is fine in chrome but in safari it has "lumpy" edges. Is there any way to get correctly rounded edges?

http://jsfiddle.net/5gh75oab/

Answer 1

Depending on the version of Safari you are using, it could be outdated and not able to interpret things as clearly as other browsers. And often new codes or things you can do in web languages can be left behind. Stuff like rounded corner is not compatible with older IE browsers or Safari etc.

A workaround is using a webkit that applies to Safari.

Look at this reference and from there, it should be straightforward and fix your issue.

link here