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?

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:

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>

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