CODEWITHSUNDEEP
htmlcss
radovix
radovix

Reputation: 3177

Unequal circles with plain HTML and CSS

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.

Upvotes: 0

Views: 376

Answers (5)

alotropico
alotropico

Reputation: 1994

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>

Upvotes: 0

vmank
vmank

Reputation: 784

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>

Upvotes: 0

Ori Drori
Ori Drori

Reputation: 191976

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>

Upvotes: 0

luek baja
luek baja

Reputation: 1674

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>

Upvotes: 2

Hardik Yewale
Hardik Yewale

Reputation: 346

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

Upvotes: -1

Related Questions