CODEWITHSUNDEEP
htmlcss
Dave Smith
Dave Smith

Reputation: 195

Creating a circle using `border-radius`

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?

Upvotes: 3

Views: 6961

Answers (5)

lumio
lumio

Reputation: 7585

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.

Upvotes: 3

Our_Benefactors
Our_Benefactors

Reputation: 3539

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>

Upvotes: 3

isherwood
isherwood

Reputation: 61124

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.

Upvotes: 0

zsawaf
zsawaf

Reputation: 2011

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>

Upvotes: 2

user5854648
user5854648

Reputation: 1121

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>

Upvotes: 0

Related Questions