How to use CSS to surround a number with a circle?

Question

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?

thirtydot · Accepted Answer · 2019-09-26T23:23:51.990

543

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.

edited Sep 26 '19 at 23:23

answered Feb 01 '11 at 10:15

thirtydot

224,678
48
389
349

The current latest version of Internet Explorer, 9, actually supports border-radius. ...and div isn't a great choice for this. :) – reisio Apr 25 '12 at 03:15
To make it work in fiddle, you could go against a CDN, like [jsdelivr](http://www.jsdelivr.com/#!css3pie), 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 Jan 06 '14 at 16:46
1

@KyleMit: That's a good idea, in theory. Unfortunately, CSS3 PIE has a [same-domain limitation](http://css3pie.com/documentation/known-issues/#x-domain). – thirtydot Jan 06 '14 at 17:29
Also, if you have a global line-height set to 1.5, you have to set it to 1 for this to work... – stefan Mar 08 '14 at 16:55
Width and Height is the key. I just used padding but then there was the 10. Thanks – Yves Jul 17 '14 at 10:25
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: http://jsfiddle.net/dQR9T/7058/ – Steven Sep 02 '16 at 16:04
@Steven The **last edit** on this [answer](http://stackoverflow.com/a/9359039/607874) (titled as "Resize with content") works for any font size and any content length. – Jose Rui Santos Sep 08 '16 at 09:06
@Steven: You can also do things like this: http://jsfiddle.net/thirtydot/dQR9T/7066/ – thirtydot Sep 08 '16 at 09:39
This only works for the width / height / border-width in the sample. As soon as these values are changed it looks really bad. As @jeffaudio points out, the style needs `box-sizing: content-box` to work correctly. – Wolfgang Ziegler Nov 08 '16 at 15:54
@WolfgangZiegler: Look at my [previous comment](http://stackoverflow.com/questions/4861224/how-to-use-css-to-surround-a-number-with-a-circle/4861306#comment66101518_4861306). You are free to downvote, but the other 241 upvoters thought this answer was at least a useful starting point... – thirtydot Nov 08 '16 at 17:08
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_ – Transformer Jan 21 '17 at 18:56
@transformer: The circle would have to be almost 3x its current size, which may be fine for your design. You could instead reduce the font size or format the number as 24.9k instead (from a design point of view, and likely will require JavaScript). – thirtydot Jan 21 '17 at 20:27
Removed padding to get the number inside the circle – Abhishek Poojary Aug 10 '17 at 10:13
What about setting 'line-height' instead of padding? – marcovtwout Aug 30 '17 at 14:37
Is there a way to the other way round. I have an object which is round. I want to place a number obove it. – Trect Dec 24 '19 at 14:23
in 2022 --- yuk – SuperUberDuper Aug 23 '22 at 12:06

Mike · Answer 2 · 2017-11-23T01:07:58.643

152

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. This should work fine for any amount of text and any size circle. Just set the width and line-height to the same value:

.numberCircle {
    width: 120px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    font-size: 32px;
    border: 2px solid #666;
}

<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>

If you need to make the content longer or shorter, all you need to do is adjust the width of the container for a better fit.

See it on JSFiddle.

edited Nov 23 '17 at 01:07

answered Oct 27 '13 at 01:08

Mike

23,542
14
76
87

2

That's exactly the problem I was having, showing a percentage inside that could be '1', '10' or '100'. This works perfect, thanks! – Felipe Castro Mar 10 '14 at 21:23
Note [this suggested edit](http://stackoverflow.com/review/suggested-edits/9495706) was denied, but the changes actually center the text a bit better vertically, so I've added them to the answer manually. – Mike Sep 14 '15 at 03:44
This is the better answer. I would use translateY(-50%) instead of the negative top margin – Tob Nov 11 '16 at 19:14
@Tobias Thank you for the great idea. I've updated my answer. – Mike Nov 11 '16 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 Nov 22 '17 at 21:38
@dlsso Very true. I've updated the answer based on your observation. The reason I had it like that was because it's gone through so many versions that are significantly different from each other ([see revision history](https://stackoverflow.com/posts/19613616/revisions)), but I was mostly concerned about updating the CSS, not the HTML. – Mike Nov 23 '17 at 01:10

score 64 · Answer 3 · edited Aug 04 '21 at 13:10

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.

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, Feb 15 '16 at 19:48
@Necreaux Updated the answer with a version that replaces the explicit inner element with pseudo-elements. — ryachza, Feb 16 '16 at 18:54
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, Jan 12 '18 at 17:34
This was the best answer, but now that flexbox exists, I think this better, no pseudo-elements, nice and short: https://stackoverflow.com/a/65314495/1028679 — rmcsharry, Jun 24 '23 at 09:14

score 58 · Answer 4 · answered Aug 24 '12 at 07:15

58

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

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

answered Aug 24 '12 at 07:15

Tom N

1,738
12
4

12

A nice idea but beware you are breaking semantics if the circle is for display purposes only – cubabit Aug 13 '14 at 07:28

score 32 · Answer 5 · answered Sep 18 '16 at 12:37

32

the easiest way is using bootstrap and badge class

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

answered Sep 18 '16 at 12:37

Navid

609
6
6

bootstrap 5.2 introduced support for [badge background colors](https://getbootstrap.com/docs/5.2/components/badge/#background-colors) – mrtexaz Nov 16 '22 at 11:10

score 30 · Answer 6 · answered Nov 08 '16 at 16:02

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

http://jsfiddle.net/qod1vstv/

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>

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 — Transformer, Jan 21 '17 at 19:04

score 10 · Answer 7 · answered Feb 01 '11 at 10:13

10

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.

answered Feb 01 '11 at 10:13

kayahr

20,913
29
99
147

dont forget ` -webkit-border-radius: 15px;` also there is a fix for IE http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser but think twice about implementing it – Hannes Feb 01 '11 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 Feb 01 '11 at 10:17

score 9 · Answer 8 · answered Dec 15 '20 at 22:17

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

To create a circle, make sure width equals height
To adapt to font-size of number in the circle, use em rather than px
To center the number in the circle, use flex with justify-content: center; align-items: center;
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>

score 7 · Answer 9 · answered Sep 09 '18 at 06:50

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.

score 4 · Answer 10 · edited Jan 03 '14 at 20:03

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?

el-mehdi chouki · Answer 11 · 2020-09-08T20:26:37.333

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>

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, Oct 13 '20 at 14:53

score 2 · Answer 12 · edited Oct 01 '21 at 13:01

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>

edited Oct 01 '21 at 13:01

mplungjan

169,008
28
173
236

answered Jun 16 '17 at 17:23

Leonardo Vega

21
1

While this code is useful, it would be good to provide some explanation – mhatch Jun 16 '17 at 18:23

jstol · Answer 13 · 2021-12-06T18:50:34.717

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>

edited Dec 06 '21 at 18:50

answered Jun 04 '13 at 19:56

jstol

847
3
12
29

score 1 · Answer 14 · answered Jan 21 '15 at 23:59

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;
}

score 1 · Answer 15 · answered Mar 02 '16 at 14:53

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>

score 1 · Answer 16 · answered Feb 01 '11 at 10:13

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

answered Feb 01 '11 at 10:13

1000Suns

197
1
2
6

score 1 · Answer 17 · answered Sep 09 '18 at 07:42

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>

score 1 · Answer 18 · edited Oct 01 '21 at 13:01

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>

Who is John Noel Bruno? If get it from a blog or tutorial, providing links would be a plus — Dush, Sep 26 '19 at 13:39

score 0 · Answer 19 · answered Oct 04 '21 at 15:08

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/

score -1 · Answer 20 · edited Oct 01 '21 at 13:02

-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>

edited Oct 01 '21 at 13:02

mplungjan

169,008
28
173
236

answered Feb 01 '11 at 10:19

Damian Leszczyński - Vash

30,365
9
60
95

Does not seem to work well – mplungjan Oct 01 '21 at 13:02

How to use CSS to surround a number with a circle?

20 Answers20

Linked

Related