Border-Radius: 50% Not Producing Perfect Circles in Chrome

Scaling a border-radius 50% class in Chrome doesn't produce a perfect circle

Not sure if this is an issue with chrome. But when I use above code with even width and height (say 4px or 6px) it is working fine, but fails with odd widths like 5px.

Border-radius: 50% produces jagged circles; why not perfect circles?

Add this border: 0; CSS property in this #mobile-choice-buttons label, and check:)

perfect circle in css with border-radius doesn't work

Here is a JSfiddle with some changes:

JSFiddle for round badge

The main changes are:

padding: 0px;
width: 50px;
height: 50px;
line-height: 50px;

Having a line-height equal to the container height will center the text vertically. This only works if the text fits on a single line.

Edit: (copied code from JSFiddle)

.badge {    display: inline-block;       padding: 0;    width: 50px;    height: 50px;        line-height: 50px;        font-size: 12px;    font-weight: lighter !important;    color: #fff !important;    text-align: center;    white-space: nowrap;    vertical-align: baseline;    background-color: #d73d33;    border-radius:50px;    position: relative;    top: -3px;}
<span class="badge badge-success">8</span>

Scaled container won't keep round shape (border-radius: 50%)?

Strange, but it works if you set width and height to 6px or any even number.

Looks like radius is calculated wrong in Chrome when it is an odd number.

.foo {  margin: 100px;  width: 6px;  height: 6px;  background-color: green;  border-radius: 50%;  -webkit-transform: scale(15, 15);  transform: scale(15, 15);}
<div class="foo"></div>

Why I'm not getting a perfect circle around an item

That is because the element is not square. Check with chrome debugger what is the width and height and make sure that both match.
My guess is that if you change padding: 0px 20px 0 20px; to padding: 20px 20px 20px 20px; it will be square.

Circle with border looks not circular, jagged and not smooth, why?

Because you think you are using 50% but you aren't, you have used border-radius: 50px; but that's wrong, you are using border of 4px which you forgot to add to the box sizing of your element (If you are aware of how box model of CSS really works).

So you should be using border-radius: 54px; instead cuz your total element's height and width sums up to 108px counting border on both the sides.

Demo


It is better if you use 50% in such cases

Demo

#circle {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
border:4px solid blue;
}

If you want to stick with the 50px measurement, than you can alter the box model rendering by using box-sizing: border-box;

box-sizing: border-box;

Demo (Altered Box Model)

Creating a circle using `border-radius`

padding and the width of the border is calculated additionally to the width and height of your element.

You have different options to solve this:

  1. add box-sizing: border-box to your element which defines what should include in the size calculation
  2. use border-radius: 50%
  3. add your border-width and padding to your border-radius.

Here the solution just with box-sizing

p {  display: inline-block;
margin: 20px; width: 100px; height: 100px;
/* these values get added to your 100px by default */ border: 5px solid #ee3e80; padding: 10px;}
p.three { padding: 0px; border-radius: 50px; /* now width and height determine how big your element is as a whole */ box-sizing: border-box;}
<p class="three"></p>


Related Topics



Leave a reply



Submit