Stray vertical line above 965 pixels with border radius in Safari

Question

I've noticed that if I have a div with a width greater than 965 pixels and a border radius on less than all 4 corners, there is a stray vertical line in the div. Here's a jsFiddle link... http://jsfiddle.net/Z3vFp/4/. Notice that this only occurs in Safari. Any thoughts? Also note that the 965 pixel threshold may be a little different in jsFiddle.

EDIT: I'm on a Macbook Pro with Retina display. I guess it's an rMBP thing?

EDIT 2: Here's a jsFiddle screencap. https://i.stack.imgur.com/gHRNv.png

Looks fine on an iMac too. Where is the line you're seeing? Can you show a screenshot? — zenkaty, Aug 21 '12 at 23:42
I don't see anything either (Macbook Pro Retina display 13" here) — raulriera, Feb 10 '13 at 02:23

score 10 · Answer 1 · answered Aug 30 '12 at 20:11

10

add -webkit-background-clip: padding-box;

.foo {
    width: 966px;
    height: 50px;
    background-color: lightgray;
    padding: 25px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    -webkit-background-clip: padding-box;
}

answered Aug 30 '12 at 20:11

denisjacquemin

7,414
10
55
72

This solution worked for me. I would also add `background-clip: padding-box;` for completeness – Andrew Terris Sep 05 '12 at 17:59

George Campbell · Answer 2 · 2012-08-22T13:32:22.397

0

I have observed this problem on my 13" Mac Book Pro (OSX 10.8) with Safari Version 6.0 (8536.25). So it has nothing to do with retina display. It occurs when you apply border radius only to one, two or three corners. The solution is to apply border radius to all four corners.

This code displays a stray vertical line:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:red}
#myBox {
  width: 960px;
  height: 300px;
  background-color: white;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  margin: auto;
}
</style>
</head>
<body>
<div id="myBox">
</div>
</body>
</html>

edited Aug 22 '12 at 13:32

answered Aug 22 '12 at 13:22

George Campbell

568
5
10

2

That's only a solution if you want all four borders :/ – Parker Holt Bossier Aug 22 '12 at 17:06
In my case, I am only using top-left and top-right. If I add bottom-left and bottom-right, that does resolve this issue, so this answer does correctly identify that having all four removes the problem. However, in my case, and as the earlier comment notes, this does not fix the issue while keeping the same results, since the question is how to fix this issue when having only some of the radii set. Note: I am using a 13' Air (not Retina) – Andrew Terris Sep 05 '12 at 17:54

score -1 · Answer 3 · answered Feb 13 '13 at 14:41

i get it on even when all four corners are set to eg: 5px

the question is - do i not use border-radius because apple safari has a bug - or wait for apple to sort it out

i reckon wait for apple to sort it out - serves rich people right while us peasants have to suffers PC's

~(that is a joke before WW3 breaks out)

Stray vertical line above 965 pixels with border radius in Safari

3 Answers3

Linked