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       Is this possible and how is it achieved

User · Answer

Late to the party  but here is a bootstrap-only solution that has worked for me  I m using Bootstrap 4    x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt body gt  x000D   lt div class  row mt-4  gt  x000D   lt div class  col-md-12  gt  x000D   lt span class  bg-dark text-white rounded-circle px-3 py-1 mx-2 h3  gt 1 lt  span gt  x000D   lt span class  bg-dark text-white rounded-circle px-3 py-1 mx-2 h3  gt 2 lt  span gt  x000D   lt span class  bg-dark text-white rounded-circle px-3 py-1 mx-2 h3  gt 3 lt  span gt  x000D   lt  div gt  x000D   lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    You basically add bg-dark text-white rounded-circle px-3 py-1 mx-2 h3 classes to your  lt span gt   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

User · Answer

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    x000D   x000D   numberCircle   x000D      width  120px  x000D      line-height  120px  x000D      border-radius  50   x000D      text-align  center  x000D      font-size  32px  x000D      border  2px solid  666  x000D    x000D   lt div class  numberCircle  gt 1 lt  div gt  x000D   lt div class  numberCircle  gt 100 lt  div gt  x000D   lt div class  numberCircle  gt 10000 lt  div gt  x000D   lt div class  numberCircle  gt 1000000 lt  div gt  x000D   x000D   x000D    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

User · Answer

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    lt div class  numberCircle  gt 30 lt  div gt   lt div class  numberCircle  style  font-size  60px  gt 1 lt  div gt   lt div class  numberCircle  style  font-size  12px  gt 2 lt  div gt

User · Answer

For circle sizes varying based on the content this should work   http   jsfiddle net nzsnw55s    lt span class  numberCircle  gt  lt span gt 30 lt  span gt  lt  span gt   lt span class  numberCircle  gt  lt span gt 1 lt  span gt  lt  span gt   lt span class  numberCircle  gt  lt span gt 5435 lt  span gt  lt  span gt   lt span class  numberCircle  gt  lt span gt 2 lt  span gt  lt  span gt   lt span class  numberCircle  gt  lt span gt 100 lt  span gt  lt  span gt    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      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    lt span class  numberCircle  gt 30 lt  span gt   lt span class  numberCircle  gt 1 lt  span gt   lt span class  numberCircle  gt 5435 lt  span gt   lt span class  numberCircle  gt 2 lt  span gt   lt span class  numberCircle  gt 100 lt  span gt    lt style type  text css  gt   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     lt  style gt    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

User · Answer

HTML EXAMPLE   lt h3 gt  lt span class  numberCircle  gt 1 lt  span gt  Regiones del Interior lt  h3 gt    CODE       numberCircle         border-radius 50       width 40px      height 40px      display block      float left      border 2px solid  000000      color  000000      text-align center      margin-right 5px

User · Answer

You work like with a standard block  that is a square   circle       width  10em  height  10em       -webkit-border-radius  5em  -moz-border-radius  5em        This is feature of CSS 3 and it is not very well suporrted  you can count on firefox and safari for sure     lt div class  circle  gt  lt span gt 1234 lt  span gt  lt  div gt

User · Answer

the easiest way is using bootstrap and badge class    lt span class  badge  gt 1 lt  span gt

User · Answer

If it s 20 and lower  you can just use the unicode characters            http   www alanwood net unicode enclosed alphanumerics html

User · Answer

You can use the border-radius for this    lt html gt     lt head gt       lt style type  text css  gt        round               -moz-border-radius  15px          border-radius  15px          padding  5px          border  1px solid  000            lt  style gt     lt  head gt       lt body gt          lt span class  round  gt 30 lt  span gt     lt  body gt   lt  html gt      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

User · Answer

Here s a demo on JSFiddle and a snippet   x000D   x000D     Creating a number within a circle using CSS    x000D   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    x000D   lt span class  numberCircle clrGreen  gt  lt span gt 8 lt  span gt  lt  span gt   lt span class  numberCircle clrRose  gt  lt span gt 80 lt  span gt  lt  span gt   lt span class  numberCircle clrOrange  gt  lt span gt 800 lt  span gt  lt  span gt   lt span class  numberCircle clrMauve  gt  lt span gt 8000 lt  span gt  lt  span gt  x000D   x000D   x000D

User · Answer

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   gt 1000 for example   increase the width and height at same time  Here is an example   x000D   x000D   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    x000D   lt div class  circled-number  gt    30  lt  div gt    lt div class  circled-number--big  gt    3000000  lt  div gt  x000D   x000D   x000D

User · Answer

Heres my way of doing it  using square method  upside is it works with different values  but you need 2 spans    x000D   x000D   circle   x000D    display  inline-block  x000D    border  1px solid black  x000D    border-radius  50   x000D    position  relative  x000D    padding  5px  x000D    x000D   circle  after   x000D    content      x000D    display  block  x000D    padding-bottom  100   x000D    height  0  x000D    opacity  0  x000D    x000D   num   x000D    position  absolute  x000D    top  50   x000D    transform  translateY -50    x000D    x000D   width holder   x000D    display  block  x000D    height  0  x000D    overflow  hidden  x000D    x000D   lt div class  circle  gt  x000D     lt span class  width holder  gt 1 lt  span gt  x000D     lt span class  num  gt 1 lt  span gt  x000D   lt  div gt  x000D   lt div class  circle  gt  x000D     lt span class  width holder  gt 11 lt  span gt  x000D     lt span class  num  gt 11 lt  span gt  x000D   lt  div gt  x000D   lt div class  circle  gt  x000D     lt span class  width holder  gt 11111 lt  span gt  x000D     lt span class  num  gt 11111 lt  span gt  x000D   lt  div gt  x000D   lt div class  circle  gt  x000D     lt span class  width holder  gt 11111111 lt  span gt  x000D     lt span class  num  gt 11111111 lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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       lt div class  numberCircle  gt 30 lt  div gt    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    lt span class  badge  style   float right  gt 123 lt  span gt

User · Answer

Late to the party but here s the solution I went with https   codepen io jnbruno pen vNpPpW Css   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     html   lt div class  quot panel-body quot  gt     lt h4 gt Normal Circle Buttons lt  h4 gt     lt button type  quot button quot  class  quot btn btn-default btn-circle quot  gt       lt i class  quot fa fa-check quot  gt  lt  i gt     lt  button gt     lt button type  quot button quot  class  quot btn btn-primary btn-circle quot  gt       lt i class  quot fa fa-list quot  gt  lt  i gt     lt  button gt   lt  div gt   Required no extra work  Thanks John Noel Bruno

User · Answer

Something like what I ve done here could work  for numbers 0 to 99    CSS     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      HTML      lt body gt       lt div class  circle  gt  lt p gt 30 lt  p gt  lt  div gt   lt  body gt

User · Answer

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    lt div class  circular-label label-outer label-size-large label-color-pink  gt       lt div class  label-inner  gt            lt span gt Fashion  amp  Beauty lt  span gt       lt  div gt   lt  div gt    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  gt  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  gt  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

User · Answer

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

User · Answer

Here s a demo on JSFiddle and a snippet    x000D   x000D   numberCircle   x000D      border-radius  50   x000D      width  36px  x000D      height  36px  x000D      padding  8px  x000D   x000D      background   fff  x000D      border  2px solid  666  x000D      color   666  x000D      text-align  center  x000D   x000D      font  32px Arial  sans-serif  x000D    x000D   lt div class  numberCircle  gt 30 lt  div gt  x000D   x000D   x000D    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

[html] How to use CSS to surround a number with a circle?

Examples related to html

Examples related to css

Examples related to css-shapes