CODEWITHSUNDEEP
htmlcssrenderingrounded-corners
Jan Moravec
Jan Moravec

Reputation: 1880

Rounded corner in Chrome - extraneous lines in corners

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

Upvotes: 2

Views: 954

Answers (2)

Ray. F
Ray. F

Reputation: 21

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

Upvotes: 2

nepeo
nepeo

Reputation: 509

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>

Upvotes: 2

Related Questions