0

I created bunch of circles with plain HTML and CSS, but it seems to me that not all of them are equal. To be honest, some of them look more like ellipses to me. Is there something wrong with my eyesight or there is some brower's limitation that I'm unaware of?

Here is the code that I used to reproduce the problem, as well as the image of the result (Chrome used for it).

body {
  background-color: whitesmoke;
  box-sizing: border-box;
}

.circle {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 10px;
  border-radius: 7px;
  background-color: brown;
  transition: 150ms border linear;
  cursor: pointer;
}

.circle::after {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border-radius: 12px;
  border: 1px solid whitesmoke;
  transition: 150ms all linear;
  content: '';
}

.circle:hover::after {
  border-color: brown;
}
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

enter image description here

Update: None of the answers actually solved the issue for me. Issue was browser related and I cannot reproduce it any longer.

Improve this question
7
  • 1
    If you want perfect circles set border-radius: 50%; instead
    – Brian Wiltshire
    Commented Sep 27, 2020 at 13:10
  • @Brian that changed nothing for me. Which browser are you using?
    – radovix
    Commented Sep 27, 2020 at 13:15
  • it's too small to be truly existing and visible, for me it looks like an optical illusion (and what's the point of having a whitesmoke circle on a whitesmoke background ?)
    – Mister Jojo
    Commented Sep 27, 2020 at 13:24
  • @MisterJojo it's pretty visible for me in a project that I used it.
    – radovix
    Commented Sep 27, 2020 at 13:27
  • reset the zoom in the browser - ctrl + 0 in chrome
    – Ori Drori
    Commented Sep 27, 2020 at 13:34

5 Answers 5

Reset to default
2

I changed border-radius to 50% and it seems to have fixed the problem on Chrome.

body {
  background-color: whitesmoke;
  box-sizing: border-box;
}

.circle1 {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 10px;
  border-radius: 7px;
  background-color: brown;
  transition: 150ms border linear;
  cursor: pointer;
}

.circle1::after {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border-radius: 12px;
  border: 1px solid whitesmoke;
  transition: 150ms all linear;
  content: '';
}

.circle1:hover::after {
  border-color: brown;
}
.circle2 {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 10px;
  border-radius: 50%;
  background-color: green;
  transition: 150ms border linear;
  cursor: pointer;
}

.circle2::after {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid whitesmoke;
  transition: 150ms all linear;
  content: '';
}

.circle2:hover::after {
  border-color: green;
}
Original:<br />
<div class="circle1"></div>
<div class="circle1"></div>
<div class="circle1"></div>
<div class="circle1"></div>
<div class="circle1"></div>
<br />
Fixed:<br />
<div class="circle2"></div>
<div class="circle2"></div>
<div class="circle2"></div>
<div class="circle2"></div>
<div class="circle2"></div>

Improve this answer
5
  • Well, it must be something browser related then because that doesn't solve the problem for me.
    – radovix
    Commented Sep 27, 2020 at 13:14
  • What browser are you using?
    – luek baja
    Commented Sep 27, 2020 at 13:15
  • Google Chrome v84.0.4147.125
    – radovix
    Commented Sep 27, 2020 at 13:17
  • I am on a chromebook and it looks like a circle on my computer.
    – luek baja
    Commented Sep 27, 2020 at 13:18
  • Looks normal on Firefox as well.
    – radovix
    Commented Sep 27, 2020 at 13:20
0

Your problem is probably caused by zooming the browser. Try to reset the zoom setting - ctrl + 0 in chrome.

If you do want your circle to look round even when zoomed - you can use scaling. Usually, the larger the rendered item, the smoother the circle appears. You can create a circle with doubled size, and then scale it down:

body {
  background-color: whitesmoke;
  box-sizing: border-box;
}

.circle {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 10px;
  cursor: pointer;
}

.circle::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: brown;
  transform: scale(0.5);
  content: '';
}

.circle::after {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid whitesmoke;
  transition: 150ms all linear;
  content: '';
}

.circle:hover::after {
  border-color: brown;
}
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

Improve this answer
0

There is a very useful trick for creating equal circles and squares only by using CSS. You set the height: 0 and by setting the width and padding-bottom to the same dimensions you create a square that is also responsive if you use percentage instead of pixels. To create a circle you add a border-radius: 100% and you are set.

.circle {
  display: inline-block;
  width: 50px;
  padding-bottom: 50px;
  height: 0;
  border-radius: 100%;
  background-color: blue;
}

body {
  background-color: whitesmoke;
  box-sizing: border-box;
}

.circle {
  position: relative;
  display: inline-block;
  width: 14px;
  padding-bottom: 14px;
  height: 0;
  border-radius: 100%;
  margin: 10px;
  background-color: brown;
  transition: 150ms border linear;
  cursor: pointer;
}

.circle::after {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border-radius: 12px;
  border: 1px solid whitesmoke;
  transition: 150ms all linear;
  content: '';
}

.circle:hover::after {
  border-color: brown;
}
<div class="circle">
</div>

<div class="circle">
</div>

<div class="circle">
</div>

<div class="circle">
</div>

<div class="circle">
</div>

<div class="circle">
</div>

<div class="circle">
</div>

<div class="circle">
</div>

Improve this answer
0
0

This is probably a more simple and accurate way to approach it.

.circle {
  background: brown;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: inline-block;
  margin: 2rem;
  position: relative;
}
.circle::after {
  content: '';
  border: 3px solid brown;
  width: 150%;
  height: 150%;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

Improve this answer
-1

I think it is related to browser but the issue are hardly visible and when looked extremely closely

border-radius=50%;

should do the work

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.