Creating a circle using `border-radius`

Question

I am reading HTML and CSS by Jon Duckett, and have been introduced to the border-radius property.

I am trying to create a circle using the code below, but the circle is not perfect. I am using the radius of 50px but it isn't perfect.

p {
  border: 5px solid #ee3e80;
  padding: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 20px;
}

p.three {
  padding: 0px;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}

<p class="three"></p>

What am I doing wrong?

You should not use vendor preixes for `border-radius` property because they are for very old browser (Firefox 4-, Chrome 4-, Safari 5-). — Vadim Ovchinnikov, Aug 10 '17 at 06:08

Our_Benefactors · Answer 1 · 2017-08-09T19:04:42.497

It should be 50%, not 50px. 50% will always draw a circle regardless of the size of the element. Setting a pixel value will only draw a circle if the element is sufficiently small.

See below.

p {
  border: 5px solid #ee3e80;
  padding: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 20px;
}

p.three {
  padding: 0px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

<p class="three"></p>

lumio · Accepted Answer · 2017-08-09T21:07:56.777

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:

add box-sizing: border-box to your element which defines what should include in the size calculation
use border-radius: 50%
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>

For a more detailed explanation about the CSS box model look at this article from MDN.

score 2 · Answer 3 · edited Aug 09 '17 at 18:52

It's because you didn't take into account the width coming from the border width, which is 5px on each end. So the total width is 110px, so your border radius will need to be 55px. An easier way for a perfect circle is to just set border-radius to 50%.

p {
  border: 5px solid #ee3e80;
  padding: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 20px;
}

p.three {
  padding: 0px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

<p class="three"></p>

score 0 · Answer 4 · edited Aug 09 '17 at 18:50

0

You just need to add 50% to the border-radius property. Below is a snippet and you will find it is a perfect circle.

p {
  border: 5px solid #ee3e80;
  padding: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 20px;
}

p.three {
  padding: 0px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

<p class="three"></p>

edited Aug 09 '17 at 18:50

Vadim Ovchinnikov

13,327
5
62
90

answered Aug 09 '17 at 18:49

user5854648

1,029
2
11
36

There's no reason a pixel value shouldn't work. This doesn't explain the actual problem. – isherwood Aug 09 '17 at 18:51

score 0 · Answer 5 · answered Aug 09 '17 at 18:55

Yet another option is to set your element's box-sizing property to border-box (as I do for nearly all elements).

p {
  border: 5px solid #ee3e80;
  padding: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 20px;
  box-sizing: border-box; /* < -------------------- here */ 
}

p.three {
  padding: 0px;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}

<p class="three"></p>

Border-box takes into consideration border when doing math, and generally simplifies layout and styling when applied across the board. Libraries like Bootstrap do this for you.

Creating a circle using `border-radius`

5 Answers5