CODEWITHSUNDEEP
htmlcss
user3277912
user3277912

Reputation: 201

perfect circle in css with border-radius doesn't work

The circle tend be oval, what I want is perfect circle. border-radius: 100% isn't work I wonder why?

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: lighter !important;
    line-height: 1;
    color: #fff !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #d73d33;
    border-radius: 50px;
    position: relative;
    top: -3px;
}
<span class="badge badge-success">8</span>

Upvotes: 12

Views: 39009

Answers (8)

DSem
DSem

Reputation: 11

In order to prevent a circle from becoming an oval, it may be necessary to include min-height and min-width additionally.

.circle {
  min-height: 50px;
  min-width: 50px;
  height: 50px;
  width: 50px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
<div class="circle" style="background-color:red;"></div>

Upvotes: 1

Ansyori
Ansyori

Reputation: 2835

check this out

.badge {
  display: inline-block;
  min-width: 10px;
  padding: 7px;
  font-size: 12px;
  font-weight: lighter !important;
  line-height: 1;
  color: #fff !important;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #d73d33;
  border-radius: 50px;
  position: relative;
  top: -3px;
}
<span class="badge badge-success">8</span>

Upvotes: 0

Naeem Akhtar
Naeem Akhtar

Reputation: 1270

You have added more than required css properties.

And you have added padding: 3px 7px; which makes the box as oval.

You can check below snippet with minimal css element to make a circle.

.badge {
  display: inline-block;
  height: 20px;
  width: 20px;
  line-height: 20px;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  font-weight: lighter !important;
  color: #fff !important;
  text-align: center;
  background-color: #d73d33;
}
<span class="badge badge-success">8</span>

Upvotes: 0

user8247953
user8247953

Reputation: 155

You can use vw unit for width and height. Like the sample below:

div {
  background-color: green;
  width: 20vw;
  height: 20vw;
  border-radius: 100%;
  text-align: center;
  line-height: 20vw;
  color: white;
}
<div>resize device</div>

Upvotes: -1

alfrednoble
alfrednoble

Reputation: 89

The main trick for making it a perfect circle is distributing the padding of the element(container) evenly => then setting border-radius: 50% or border-radius: 100%. So you can get rid of the height and width declaration and use absolute positioning and padding to control the height and width

or same height and width and uniform padding value

 .element-class {
    Position: absolute;
    padding: 10em or 10% or with any unit;
    border-radius: 50% or 100%;
  }

OR

.element-class {
 height: 10em;
 width: 10em;
 padding: 10em;   **
 border-radius: 50%;
}

Upvotes: 0

R. Schifini
R. Schifini

Reputation: 9313

Here is a JSfiddle with some changes:

JSFiddle for round badge

The main changes are:

padding: 0px;
width: 50px;
height: 50px;
line-height: 50px;

Having a line-height equal to the container height will center the text vertically. This only works if the text fits on a single line.

Edit: (copied code from JSFiddle)

.badge {
    display: inline-block;
   
    padding: 0;
    width: 50px;
    height: 50px;    
    line-height: 50px;
    
    font-size: 12px;
    font-weight: lighter !important;
    color: #fff !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #d73d33;
    border-radius:50px;
    position: relative;
    top: -3px;
}
<span class="badge badge-success">8</span>

Upvotes: 15

Onesmus.A
Onesmus.A

Reputation: 1

I had the same issue. When I added a 100% border-radius, my picture turned into an oval. That is because my picture is wider than it is tall. Imagine smoothing the edges of a rectangle. If you want your image to be circular, you have to make sure the height and width dimensions are the same. You could try setting them by doing the following:

css height: 200px; width: 200px; (so the point is having equal height and with in your CSS)

This will make sure that your image is circular, however, it may cause your image to stretch and become distorted because your originally image is NOT a perfect square I presume.

Upvotes: 0

Nalan Madheswaran
Nalan Madheswaran

Reputation: 10572

if it's not perfect circle check display: inline-block and border-radius: 50%:

 .cirlce {
    height: 20px;
    width: 20px;
    padding: 5px;
    text-align: center; 
    border-radius: 50%;
    display: inline-block;
    color:#fff;
    font-size:1.1em;
    font-weight:600;
    background-color: rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.2);
    }

Upvotes: 5

Related Questions