使用`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 .

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 .