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>

Answer 1

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>

Answer 2

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.