Border circle looks blurry

Question

This circle with border looks blurry. Is it possible to fix it and how?

div {
  border-radius: 50%;
  border: 1px solid black;
  height: 22px;
  width: 22px;
  background-color: white;
}

<div></div>

All browsers. no, i want it 1px solid. Is there a way to fix it? — waisie li, Jan 11 '16 at 21:30
AFAIK, what you're seeing is a result of anti-aliasing at a certain pixel resolution. You can fix it with a better screen (obviously not what you wanted), or (depending on your actual use case) use an image instead. — Blazemonger, Jan 11 '16 at 21:32

web-tiki · Answer 1 · 2016-01-12T07:31:36.187

Using box-shadow with a transparent border seems to make it less blurry too with chrome.
In the following example, the first circle is the original and the second is made with a box-shadow :

div {
  border-radius: 50%;
  border: 1px solid black;
  height: 22px;
  width: 22px;
  background-color: white;
  float:left;
}
div + div{
  width:20px;
  height:20px;
  border-color:transparent;
  box-shadow:0 0 0 1px #000;
  margin:1px 3px;
}

<div></div>
<div></div>

score 3 · Answer 2 · edited May 23 '17 at 11:52

Seems like transform: rotate(45deg) helps, but not transform: translateZ(1px) rotate(45deg):

div {
  display: inline-block;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  border: 1px solid black;
}

div + div {
  transform: rotate(45deg);
}

div + div + div {
  transform: rotate(45deg);
  transform: translateZ(1px) rotate(45deg);
}

<div></div> <div></div> <div></div>

Based on this answer.

circusdei · Answer 3 · 2016-01-11T21:55:38.953

1

Using Two divs has a better render effect.

div, svg {
  float: left;
  clear: left;
}
p {
  float :left;
}

#div0{
  border-radius: 50%;
  background-color: #fff;
  height: 22px;
  width: 22px;
  border: 1px solid #000;
}

#div1 {
  border-radius: 50%;
  background-color: black;
  height: 24px;
  width: 24px;
}

#div2 {
  border-radius: 50%;
  height: 22px;
  width: 22px;
  background-color: white;
  position: relative;
  top: 1px;
  left: 1px;
}

<div id="div0"></div>
<p>Original</p>

<svg width=26 height=26>
  <circle cx=13 cy=13 r=12 stroke-width=1 stroke=black fill=none />
</svg>
<p>SVG</p>

<div id="div1">
  <div id="div2">
  </div>
</div>
<p>Nested</p>

edited Jan 11 '16 at 21:55

answered Jan 11 '16 at 21:32

circusdei

1,967
12
28

1

doesn't seem like a significant difference from the original. – andi Jan 11 '16 at 21:33
1

Sorry, but it doesn't. – Blazemonger Jan 11 '16 at 21:33
Put both methods side by side for comparison, and fixed off-by-one width/height – circusdei Jan 11 '16 at 21:43
Nested at 110% are... strange :D – Qwertiy Jan 11 '16 at 21:58
@Qwertiy yeah -- getting that too. – circusdei Jan 11 '16 at 21:59

score 1 · Answer 4 · answered Jan 11 '16 at 21:52

1

Try using svg and make a circle a little bigger:

div {
  display: inline-block;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  border: 1px solid black;
}

<svg width=56 height=26>
  <circle cx=13 cy=13 r=12 stroke-width=1 stroke=black fill=none />
  <circle cx=43 cy=13 r=11.5 stroke-width=1 stroke=black fill=none />
</svg>

<div></div>

answered Jan 11 '16 at 21:52

Qwertiy

19,681
15
61
128

Added to the answer below for comparison...not trying to steal your answer :) – circusdei Jan 11 '16 at 21:56

Border circle looks blurry

4 Answers4