Creating a circle using `border-radius` - html

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?

Answer 1

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.

Answer 2

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>

Answer 3

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>

Answer 4

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>

Answer 5

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.