CODEWITHSUNDEEP
htmlcssborder
Jeff Davenport
Jeff Davenport

Reputation: 2774

Two borders on top of each other, are not lined up

Hey there guys having a really frustrating time here with CSS, basically I am trying to overlap borders with z-index to get a visual of a 1/5 border 2/5th border 3/5th border and 4/5th border of a circle

But in doing so the absolute positioned borders are not lining up exactly, you can see the color bleeding behind it, why is this? How else should I be doing this? Here is the jsFiddle and the code is below.

.circle {
  padding: 20px;
  border: 20px solid transparent;
  border-top-color: red;
  position: absolute;
  border-radius: 50px;
  z-index: 0;
}
.two {
  border-top-color: blue;
  z-index: 1;
}
<div class="circle"></div>
<div class="circle two"></div>

Upvotes: 1

Views: 866

Answers (2)

theEpsilon
theEpsilon

Reputation: 1919

Your problem is anti-aliasing, which causes the colors to blend to prevent "jaggies" and makes it appear that the colors are bleeding. However, if you zoom in, you can see that there is no bleeding. That, and floating point numbers aren't stored exactly, so CSS's calculation of the circles is very slightly off.

I would use something like Adobe Illustrator or InkScape or even an online vector graphics tool and make an SVG of what you want.

VERDICT: Use something like Adobe Illustrator or InkScape or even an online vector graphics tool and make an SVG of what you want.

Upvotes: 2

Dove Man
Dove Man

Reputation: 147

Is this what you want?

.circle {
  padding: 20px;
  border: 20px solid;
  border-top-color: red;
  position: absolute;
  border-radius: 50px;
  z-index: 0;
}

.circletwo {
  border-top-color: blue;
  z-index: 123;
}
<div class="circle"></div>
<div class="circletwo"></div>

Upvotes: 0

Related Questions