CODEWITHSUNDEEP
htmlcsscss-shapes
m0bi5
m0bi5

Reputation: 9452

Making perfect circular divs with CSS

As you can see here I have two divs. Each div has different text in it. Both the divs have the same styling but the div with id days is perfectly circular but the div with id hour is like an oval. How can I make the hour also circular?

Here is my code:

 .component {
   color: white;
   border: 1px solid white;
   border-radius: 50%;
   display: inline;
   padding: 20px;
 }
 body {
   background-color: black;
   margin: 20px;
 }
<body>
  <div class="component" id="days">71</div>
  <div class="component" id="hour">5</div>
</body>

Upvotes: 3

Views: 1264

Answers (4)

Experience111
Experience111

Reputation: 418

This is because when you say something like :

border-radius: 50%;

the "percentages for the horizontal axis refer to the width of the box" according to MDN documentation ( https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius )

So since you are displaying your elements inline, the width of your .component elements is exactly the width of their content. One of the solutions would be to display the elements inline-block and force them to be squares so that applying the border-radius:50% property will make them both perfect circles, no matter the size of their content.

Here's the solution I suggest :

1) Display the .components elements inline-block so that I can act on their width and height.

2) Give them a width and height that is exactly the size of the padding so that they don't stretch too far.

3) Apply text-align: center to make sure the numbers are properly centered (it was problematic for the second number).

Here's a demo of the code I suggest :

.component{
    color:white;
    border:1px solid white;
    border-radius:50%;
    display:inline-block;
    padding:20px;
    height: 20px;
    width: 20px;
    text-align:center;
}

body {
   background-color: black;
   margin: 20px;
 }
<body>
  <div class="component" id="days">71</div>
  <div class="component" id="hour">5</div>
</body>

Hope this helps !

Upvotes: 6

Alex
Alex

Reputation: 8695

You have to use fixed width for this situation. The first div has higher width compare to the second div because of content(71 vs 5).

Jsfiddle

.component {
  color: white;
  border: 1px solid white;
  border-radius: 50%;
  display: inline-block;
  width: 60px;
  text-align: center;
  padding: 20px 0;
}
body {
  background-color: black;
  margin: 20px;
}
<body>
  <div class="component" id="days">71</div>
  <div class="component" id="hour">5</div>
</body>

Upvotes: 3

M.Matias
M.Matias

Reputation: 107

.component{
   color:white;
   border:1px solid white;
   border-radius:50%;
   display:inline-block;
   height:50px;
   line-height:50px;
   width:50px;
   text-align: center;
}

Update your css to this. Cheers! See sample fiddle: Circular Div

Upvotes: 3

Mladen Oršolić
Mladen Oršolić

Reputation: 1422

This did the trick for me, not sure if thats the solution you were looking for tho :

<div class="component" id="hour">&nbsp;5&nbsp;</div>

Upvotes: 2

Related Questions