320

I would like to surround a number in a circle like in this image:

Number in Circle Image

Is this possible and how is it achieved?

20 Answers 20

551

Here's a demo on JSFiddle and a snippet:

.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}
<div class="numberCircle">30</div>

My answer is a good starting point, some of the other answers provide flexibility for different situations. If you care about IE8, look at the old version of my answer.

16
  • The current latest version of Internet Explorer, 9, actually supports border-radius. ...and div isn't a great choice for this. :)
    – reisio
    Commented Apr 25, 2012 at 3:15
  • To make it work in fiddle, you could go against a CDN, like jsdelivr, instead of using a relative path for the URL. If you update the URL in your fiddle with //cdn.jsdelivr.net/css3pie/2.0b1/PIE.htc it should work everywhere without additional retooling.
    – KyleMit
    Commented Jan 6, 2014 at 16:46
  • 1
    @KyleMit: That's a good idea, in theory. Unfortunately, CSS3 PIE has a same-domain limitation.
    – thirtydot
    Commented Jan 6, 2014 at 17:29
  • 5
    To avoid having to do math in the CSS whenever you change the font-size (a hassle if you are doing responsive design for example), you can use this adaption of thirtydot's jsfiddle that only uses pixels to describe the font-size: jsfiddle.net/dQR9T/7058
    – Steven
    Commented Sep 2, 2016 at 16:04
  • 1
    @steven how to ensure the circle is always around the number , or can we make the circle bigger if the number is 24928 it overflows right now Commented Jan 21, 2017 at 18:56
154

The problem with most of the other answers here is you need to tweak the size of the outer container so that it is the perfect size based on the font size and number of characters to be displayed. If you are mixing 1 digit numbers and 4 digit numbers, it won't work. If the ratio between the font size and the circle size isn't perfect, you'll either end up with an oval or a small number vertically aligned at the top of a large circle.

We need a solution that will work fine for any amount of text and any size circle.

Solution 1: Static widths

Just set the width to be something slightly larger than the maximum number of characters you anticipate. Here, I've used ch units, which is the width of the 0 character. Since the maximum number of characters is 7, I chose 8ch (however em, px, etc units will work just fine too):

.numberCircle {
  display: flex;
  width: 8ch; /* Set this to slightly wider than the longest string */
  align-items: center;  
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;  
  border: 2px solid #666;
}
<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>

Solution 2: Variable widths

The following solution will make the size of the circle be slightly larger than the width of the text:

.numberCircle {
  display: flex;
  width: fit-content;
  min-width: 1rem;
  padding: 0.5rem;
  align-items: center;  
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;  
  border: 2px solid #666;
}
<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>
<div class="numberCircle">Even longer string</div>

6
  • 2
    That's exactly the problem I was having, showing a percentage inside that could be '1', '10' or '100'. This works perfect, thanks! Commented Mar 10, 2014 at 21:23
  • Note this suggested edit was denied, but the changes actually center the text a bit better vertically, so I've added them to the answer manually.
    – Mike
    Commented Sep 14, 2015 at 3:44
  • This is the better answer. I would use translateY(-50%) instead of the negative top margin
    – Tob
    Commented Nov 11, 2016 at 19:14
  • @Tobias Thank you for the great idea. I've updated my answer.
    – Mike
    Commented Nov 11, 2016 at 21:24
  • It would be much cleaner to remove the span and add the text-align and line-height to the div. Still the best answer probably.
    – dlsso
    Commented Nov 22, 2017 at 21:38
65

For circle sizes varying based on the content this should work:

.numberCircle {
  display: inline-block;
  line-height: 0px;
  border-radius: 50%;
  border: 2px solid;
  font-size: 32px;
}

.numberCircle span {
  display: inline-block;
  padding-top: 50%;
  padding-bottom: 50%;
  margin-left: 8px;
  margin-right: 8px;
}
<span class="numberCircle"><span>30</span></span>
<span class="numberCircle"><span>1</span></span>
<span class="numberCircle"><span>5435</span></span>
<span class="numberCircle"><span>2</span></span>
<span class="numberCircle"><span>100</span></span>

It relies on the width of the content plus the margin-'s to determine the radius, then extends the height to match using the padding-'s. The margin-'s would need to be adjusted based on the font-size.

Update to remove inner element:

.numberCircle {
  display: inline-block;
  border-radius: 50%;
  border: 2px solid;
  font-size: 32px;
}

.numberCircle:before,
.numberCircle:after {
  content: '\200B';
  display: inline-block;
  line-height: 0px;
  padding-top: 50%;
  padding-bottom: 50%;
}

.numberCircle:before {
  padding-left: 8px;
}

.numberCircle:after {
  padding-right: 8px;
}
<span class="numberCircle">30</span>
<span class="numberCircle">1</span>
<span class="numberCircle">5435</span>
<span class="numberCircle">2</span>
<span class="numberCircle">100</span>

Uses pseudo-elements to force the height. Need the zero width space for vertical alignment. Moved the line-height:0px from the outer to the pseudo so that it is at least visible when degrading for IE8.

5
  • 5
    For me, this was the best solution. It allows larger numbers, and is the most scalable. All the other solutions have way too much hard coding of sizes. This has the least. Font-size can be changed a fair amount without breaking this. If changed drastically, the margin needs to be adjusted, but it is very forgiving. Having to use a nested element is somewhat of a negative though.
    – Necreaux
    Commented Feb 15, 2016 at 19:48
  • 1
    @Necreaux Updated the answer with a version that replaces the explicit inner element with pseudo-elements.
    – ryachza
    Commented Feb 16, 2016 at 18:54
  • 2
    Best solution indeed. I just replaced the margin-left and margin-right size by 0.35em instead of 8px (padding in updated solution). So that you can change the number font-size and keep a suited margin.
    – Jibato
    Commented Jan 12, 2018 at 17:34
  • The best one it woked well with all sizes Commented Feb 10, 2022 at 13:12
  • This was the best answer, but now that flexbox exists, I think this better, no pseudo-elements, nice and short: stackoverflow.com/a/65314495/1028679
    – rmcsharry
    Commented Jun 24, 2023 at 9:14
58

If it's 20 and lower, you can just use the unicode characters ① ② ... ⑳

http://www.alanwood.net/unicode/enclosed_alphanumerics.html

1
  • 12
    A nice idea but beware you are breaking semantics if the circle is for display purposes only
    – cubabit
    Commented Aug 13, 2014 at 7:28
32

the easiest way is using bootstrap and badge class

 <span class="badge">1</span>
1
30

This version does not rely on hard-coded, fixed values but sizes relative to the font-size of the div.

http://jsfiddle.net/qod1vstv/

enter image description here

CSS:

.numberCircle {
    font: 32px Arial, sans-serif;

    width: 2em;
    height: 2em;
    box-sizing: initial;

    background: #fff;
    border: 0.1em solid #666;
    color: #666;
    text-align: center;
    border-radius: 50%;    

    line-height: 2em;
    box-sizing: content-box;   
}

HTML:

<div class="numberCircle">30</div>
<div class="numberCircle" style="font-size: 60px">1</div>
<div class="numberCircle" style="font-size: 12px">2</div>
1
  • 2
    hi this is very nice, but if the number is large, even in 100's or 1000's it scrolls out of the circle. Also, would it be possible to use the size of the font to create a new background color Commented Jan 21, 2017 at 19:04
9

You can use the border-radius for this:

<html>
  <head>
    <style type="text/css">

    .round
    {
        -moz-border-radius: 15px;
        border-radius: 15px;
        padding: 5px;
        border: 1px solid #000;
    }

  </style>
  </head>  
  <body>   
    <span class="round">30</span>
  </body>
</html>  

Play with the border radius and the padding values until you are satisfied with the result.

But this won't work in all browsers. I guess IE still does not support rounded corners.

3
  • dont forget ` -webkit-border-radius: 15px;` also there is a fix for IE htmlremix.com/css/curved-corner-border-radius-cross-browser but think twice about implementing it
    – Hannes
    Commented Feb 1, 2011 at 10:17
  • +1 probably the easiest method...fallback for IE looks ok as well (square). wordpress does it like this if i recall
    – Ross
    Commented Feb 1, 2011 at 10:17
  • This is not a circle. This is a rounded rectangle that looks ok only because the text "30" is roughly a square. Commented Aug 28 at 8:03
9

I am surprised nobody used flex which is easier to understand, so I put my version of answer here:

  1. To create a circle, make sure width equals height
  2. To adapt to font-size of number in the circle, use em rather than px
  3. To center the number in the circle, use flex with justify-content: center; align-items: center;
  4. if the number grows (>1000 for example), increase the width and height at same time

Here is an example:

.circled-number {
  color: #666;
  border: 2px solid #666;
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em; 
  height: 2em;
}

.circled-number--big {
  color: #666;
  border: 2px solid #666;
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4em; 
  height: 4em;
}
<div class="circled-number">
  30
</div>

<div class="circled-number--big">
  3000000
</div>

8

Late to the party, but here is a bootstrap-only solution that has worked for me. I'm using Bootstrap 4:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
<div class="row mt-4">
<div class="col-md-12">
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">1</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">2</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">3</span>
</div>
</div>
</body>

You basically add bg-dark text-white rounded-circle px-3 py-1 mx-2 h3 classes to your <span> (or whatever) element and you're done.

Note that you might need to adjust margin and padding classes if your content has more than one digits.

4

My solution here - this easily allows for different sizes and colors and ties into a CMS for editorial control. For IE degrading to squares.

HTML:

<div class="circular-label label-outer label-size-large label-color-pink">
    <div class="label-inner"> 
        <span>Fashion & Beauty</span>
    </div>
</div>

CSS:

.circular-label {
    overflow: hidden;
    z-index: 100;
    vertical-align: middle;
    font-size: 11px;
    -webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.label-inner {
    width: 85%;
    height: 85%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 2px dotted white;
    vertical-align: middle;
    margin: auto;
    top: 5%;
    position: relative;
    overflow: hidden;
}
.label-inner > span {
    display: table;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    position: absolute;
    margin: auto;
    margin-top: 38%;
    font-family:'ProximaNovaLtSemibold';
    font-size: 13px;
    line-height: 1.0em;
}
.circular-label.label-size-large {
    width: 110px;
    height: 110px;
    -moz-border-radius: 55px;
    -webkit-border-radius: 55px;
    border-radius: 55px;
    margin-top:-55px;
}
.circular-label.label-size-med {
    width: 76px;
    height: 76px;
    -moz-border-radius: 38px;
    -webkit-border-radius: 38px;
    border-radius: 38px;
    margin-top:-38px;
}
.circular-label.label-size-med .label-inner > span {
    margin-top: 33%;
}
.circular-label.label-size-small {
    width: 66px;
    height: 66px;
    -moz-border-radius: 33px;
    -webkit-border-radius: 33px;
    border-radius: 33px;
    margin-top:-33px;
}

It's not too difficult to see how to do this. The bigger question is whether it is possible to make the dimensions of the circle scale to content.

Currently I don't think it is possible. Anyone?

3

enter image description here

Here's a demo on JSFiddle and a snippet:

/* Creating a number within a circle using CSS */
.numberCircle {
    font-family: "OpenSans-Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
    display: inline-block;
    color: #fff;
    text-align: center;
    line-height: 0px;
    border-radius: 50%;
    font-size: 12px;
    min-width: 38px;
    min-height: 38px;
}

.numberCircle span {
    display: inline-block;
    padding-top: 50%;
    padding-bottom: 50%;
    margin-left: 1px;
    margin-right: 1px;
}

/* Some Back Ground Colors */
.clrGreen {
    background: #51a529;
}
.clrRose {
    background: #e6568b;
}
.clrOrange {
    background: #ec8234;
}
.clrBlueciel {
    background: #21adfc;
}
.clrMauve {
    background: #7b5d99;
}
<span class="numberCircle clrGreen"><span>8</span></span>
<span class="numberCircle clrRose"><span>80</span></span>
<span class="numberCircle clrOrange"><span>800</span></span>
<span class="numberCircle clrMauve"><span>8000</span></span>

1
  • I like this solution better than the first one, because the circles stay at the same size, no matter what number is in them.
    – cslotty
    Commented Oct 13, 2020 at 14:53
2

.numberCircle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: block;
  float: left;
  border: 2px solid #000000;
  color: #000000;
  text-align: center;
  margin-right: 5px;
}
<h3><span class="numberCircle">1</span> Regiones del Interior</h3>

1
  • While this code is useful, it would be good to provide some explanation
    – mhatch
    Commented Jun 16, 2017 at 18:23
1

Do something like this in your css

 div {
    width: 10em; height: 10em; 
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  p {
    text-align: center; margin-top: 4.5em;
  }

Use the paragraph tag to write the text. Hope that helps

1

Improving the first answer just get rid of the padding and add line-height and vertical-align:

.numberCircle {
   border-radius: 50%;       

   width: 36px;
   height: 36px;
   line-height: 36px;
   vertical-align:middle;

   background: #fff;
   border: 2px solid #666;
   color: #666;

   text-align: center;
   font: 32px Arial, sans-serif;
}
1

The answer of thirtydot is right but is missing a little point. You need to add position: relative , if you want to have centered value in the circle and include also different range of number. For example 123;

HTML:

<div class="numberCircle">30</div>

CSS:

.numberCircle {    

border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
position: relative;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;

font: 32px Arial, sans-serif;
}

but an easiest solution is to use Bootstrap

<span class="badge" style ="float:right">123</span>

1

Heres my way of doing it, using square method. upside is it works with different values, but you need 2 spans.

.circle {
  display: inline-block;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
  padding: 5px;
}
.circle::after {
  content: '';
  display: block;
  padding-bottom: 100%;
  height: 0;
  opacity: 0;
}
.num {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.width_holder {
  display: block;
  height: 0;
  overflow: hidden;
}
<div class="circle">
  <span class="width_holder">1</span>
  <span class="num">1</span>
</div>
<div class="circle">
  <span class="width_holder">11</span>
  <span class="num">11</span>
</div>
<div class="circle">
  <span class="width_holder">11111</span>
  <span class="num">11111</span>
</div>
<div class="circle">
  <span class="width_holder">11111111</span>
  <span class="num">11111111</span>
</div>

1

Late to the party but here's the solution I went with https://codepen.io/jnbruno/pen/vNpPpW

Required no extra work. Thanks John Noel Bruno

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 24px;
  line-height: 1.33;
}

.btn-circle {
  width: 30px;
  height: 30px;
  padding: 6px 0px;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.42857;
}
<div class="panel-body">
  <h4>Normal Circle Buttons</h4>
  <button type="button" class="btn btn-default btn-circle">
        <i class="fa fa-check"></i>
      </button>
  <button type="button" class="btn btn-primary btn-circle">
        <i class="fa fa-list"></i>
      </button>
</div>

2
  • 1
    Who is John Noel Bruno? If get it from a blog or tutorial, providing links would be a plus
    – Dush
    Commented Sep 26, 2019 at 13:39
  • That requires bootstrap and fontawesome. You can see the in the Settings > CSS > External Stylesheets
    – Mixchange
    Commented Feb 4 at 5:18
1

Something like this could work (for numbers 0 to 99):

.circle {
  border: 0.1em solid grey;
  border-radius: 100%;
  height: 2em;
  width: 2em;
  text-align: center;
}

.circle p {
  margin-top: 0.10em;
  font-size: 1.5em;
  font-weight: bold;
  font-family: sans-serif;
  color: grey;
}
<body>
  <div class="circle">
    <p>30</p>
  </div>
</body>

0

You can use

span.red {
    background: red;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.grey {
    background: #cccccc;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.green {
    background: #5EA226;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.blue {
    background: #5178D0;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.pink {
    background: #EF0BD8;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}
    <h1><span class="grey">1</span>A grey circle with number inside</h1>
    <h1><span class="red">2</span>A red circle with number inside</h1>
    <h1><span class="blue">3</span>A blue circle with number inside</h1>
    <h1><span class="green">4</span>A green circle with number inside</h1>
    <h1><span class="pink">5</span>A pink circle with number inside</h1>

Thank to https://wpsites.net/web-design/colored-numbered-circles-using-pure-css-html/

-1

You work like with a standard block, that is a square

This is feature of CSS 3 and it is not very well suporrted, you can count on firefox and safari for sure.

.circle {
  width: 10em;
  height: 10em;
  -webkit-border-radius: 5em;
  -moz-border-radius: 5em;
  border: 1px solid black;
}
<div class="circle"><span>1234</span></div>

1
  • Does not seem to work well
    – mplungjan
    Commented Oct 1, 2021 at 13:02

Not the answer you're looking for? Browse other questions tagged or ask your own question.