Rounded corner in Chrome - extraneous lines in corners

Question

I am cracking my head over what causes the extraneous lines that show up around rounded corners in Chrome, IE a Safari. It does not happen in FF.

div.round-box {
  border-bottom: 1px solid #b3b3b3;
  height: 20px;
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
}

div.round-box .steps {
  background-color: #0fa862;
  border: 20px solid white;
  border-radius: 32px;
  color: white;
  font-size: 1.7em;
  padding: 15px 25px;
  position: relative;
  outline: none;
  text-decoration: none;
  top: 10px;
  white-space: nowrap;
  -webkit-border-radius: 32px;
}

<div class="round-box">
  <a class="steps" href="steps">Follow 5 Easy Steps to Install XYZ</a>
</div>

Many thanks for any hints.

Extraneous lines around rounded corners

Thank you. Tried it and it fixes the problem in Chrome and Safari. Unfortunatelly it does not seem to do the trick in IE. — Jan Moravec, Oct 21 '14 at 11:20
Add `background-clip: padding-box;` to `.steps` - http://jsfiddle.net/L9vf6btu/, check this out - http://stackoverflow.com/questions/26468645/border-radius-creates-an-outline-in-ie — Anonymous, Oct 21 '14 at 11:23

score 2 · Accepted Answer · edited Oct 21 '14 at 11:43

2

It looks like a miscalc in the browser render/ anti-aliasing. It's drawing the green background underneath the white border element and a little bit is bleeding out the edge. Can be solved by wrapping the inner element again so the green only draws inside the border.

div.round-box {
  border-bottom: 1px solid #b3b3b3;
  height: 20px;
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
}
div.inner-box {
  display: inline-block;
  border: 20px solid white;
  border-radius: 32px;
  -webkit-border-radius: 32px;
}
div.round-box .steps {
  display: block;
  background-color: #0fa862;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  color: white;
  font-size: 1.7em;
  padding: 15px 25px;
  outline: none;
  text-decoration: none;
  white-space: nowrap;
}

<div class="round-box">
  <div class="inner-box">
    <a class="steps" href="steps">Follow 5 Easy Steps to Install XYZ</a>
  </div>
</div>

edited Oct 21 '14 at 11:43

Lee Taylor

7,761
16
33
49

answered Oct 21 '14 at 10:19

nepeo

509
2
9

At present this is merely a comment on the possible problem. Please adapt the fiddle and test whether your **theory** solves the problem. – Lee Taylor Oct 21 '14 at 10:21
A little terse don't you think @LeeTaylor? We're all just trying to help out here. It's an answer even if i haven't posted a fix yet and really the reason should be more important than a patch so this problem can be avoided in future. – nepeo Oct 21 '14 at 10:27
No, it's a comment! An answer would show a proposed solution, not discuss a **potential** one. – Lee Taylor Oct 21 '14 at 10:28
1

Thanks for your comments @LeeTaylor, incidentally wrapping it does work and I hope this helps the OP. – nepeo Oct 21 '14 at 10:57
Thank you. I was thinking that it must be some rendering / calc problem. Your code (http://jsfiddle.net/94nx6srf/) does not align the adjacent border lines properly, but adding two new CSS properties to the inner-box fixed the problem (http://jsfiddle.net/94nx6srf/1/). I am going to adopt this solution because it works across all my browsers. – Jan Moravec Oct 21 '14 at 11:33

score 2 · Answer 2 · answered Dec 07 '17 at 05:32

2

This one is really helpful:
Add background-clip: padding-box;
to .steps

answered Dec 07 '17 at 05:32

Ray. F

21
2

Rounded corner in Chrome - extraneous lines in corners

2 Answers2