I want to create a box with the top left and top right corners rounded. My CSS:
border-radius: 4px 4px 0 0;
In Safari 6, border-radius creates some distortion/artifacts. The corners are 'rough' and mysterious vertical white lines (box bg is blue) appear.
I've tried everything (-webkit-border-radius, border-top-left-radius, border-top-right-radius, border-style:none, border-width:0, border-color:transparent, etc) but this seems to be the only thing that doesn't break:
border-radius: 4px;
Here is a possible answer, but you could be dealing with a number of things, so @ndm makes an excellent suggestion for ways to share an example.
To help debug what is going on, I like to increase the border radius and add colored backgrounds.
Overflow
You might just have content inside the box that is overflowing and covering up the corner. Try .box { overflow: hidden; }
.box { overflow: hidden; }
. Here's a JSFiddle that verifies three common scenarios working in Safari 6.0.2.
Antialiasing
If the "mysterious white lines" are very subtle, it could simply be Safari's anti-aliasing which tries to make the border appear smoother. Check this theory by making the border thicker and comparing the look.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.