76

Like this

circle around content

With only this code

<span>1</span>
web-tiki
  • 99,765
  • 32
  • 217
  • 249
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • 1
    possible duplicate of http://stackoverflow.com/questions/4840736/easier-way-to-create-circle-div-than-using-an-image – Vivek Chandra Feb 20 '12 at 09:40
  • possible duplicate of [How to CSS a number to be surrounded by a circle?](http://stackoverflow.com/questions/4861224/how-to-css-a-number-to-be-surrounded-by-a-circle) – thirtydot Feb 20 '12 at 10:22
  • 3
    You have written “ellipse” but show an image with a circle. Which one do you mean? – Jukka K. Korpela Feb 20 '12 at 10:43
  • Use CSS `-moz-border-radius: 50%;border-radius: 30px;` – XIMRX Jul 18 '14 at 10:11
  • Check out my latest improvement on how to make a circle resize to fit all the content. – Jose Rui Santos Apr 26 '16 at 11:46
  • 1
    Possible duplicate of [Create three vertical dots (ellipsis) inside a circle](http://stackoverflow.com/questions/40628465/create-three-vertical-dots-ellipsis-inside-a-circle) – Zach Saucier Nov 17 '16 at 17:35

5 Answers5

132

http://jsfiddle.net/MafjT/

You can use this css

span {
    display: block;
    height: 60px;
    width: 60px;
    line-height: 60px;

    -moz-border-radius: 30px; /* or 50% */
    border-radius: 30px; /* or 50% */

    background-color: black;
    color: white;
    text-align: center;
    font-size: 2em;
}

Because you want a circle, you need to set the same value to width, height and line-height (to center the text vertically). You also need to use half of that value to the border radius.

This solution always renders a circle, regardless of content length.

But, if you want an ellipse that expands with the content, then http://jsfiddle.net/MafjT/256/

Resize with content - Improvement

In this https://jsfiddle.net/36m7796q/2/ you can see how to render a circle that reacts to a change in content length.
You can even edit the content on the last circle, to see how the diameter changes.

Jose Rui Santos
  • 15,009
  • 9
  • 58
  • 71
  • Adding: **pure css info icon** to be found easier by SE. I searched a while and finally found your great css solution when searching "css text around circle"... – Avatar Dec 06 '15 at 09:47
  • It doesn't work for inline elements such as `Click on i for info` where `display:block` has been changed to `display:inline` so that it can flow as part of the text. Any idea how to work with this? – Ken Sharp Feb 18 '16 at 18:23
  • The last example (https://jsfiddle.net/36m7796q/2/) doesn't render correctly in Firefox 50 for me. I get an oval shape rather than a circle. – leeb Dec 15 '16 at 09:22
  • @leeb Replace the `display: inline-flex` with `display: inline-block` in Firefox. This fixes the problem but causes the text not to be vertically centered. – Jose Rui Santos Dec 15 '16 at 11:06
  • @JoseRuiSantos yes this works, but as you say it does not result in the exact same result. I've come to the conclusion that the best way is to use a fixed width/height element, and hope the content isn't too long ;) – leeb Dec 15 '16 at 11:35
6

Using CSS3:

span
{-moz-border-radius: 20px;
    border-radius: 20px;
border-color:black;
    background-color:black;
color:white;
    padding-left:15px;
    padding-right:15px;
    padding-top:10px;
    padding-bottom:10px;
    font-size:1.3em;
}

​ http://jsfiddle.net/NXZnq/

Curtis
  • 101,612
  • 66
  • 270
  • 352
  • This did not render as a circle in my case but more like rounded left and right and flat top and bottom. Your html may vary. – LosManos Feb 17 '20 at 20:31
6

You have many answers now but I try tell you the basics.

First element is inline element so giving it margin from top we need to convert it to block element. I converted to inline-block because its close to inline and have features of block elements.

Second, you need to giving padding right and left more than top and bottom because numerals itself extend from top to bottom so it gets reasonable height BUT as we want to make the span ROUND so we give them padding more on left and right to make room for BORDER RADIUS.

Third, you set border-radius which should be more than PADDING + width of content itself so around 27px you will get required roundness but for safely covering all numerals you can set it to some higher value.

Practical Example.

Shawn Taylor
  • 3,974
  • 4
  • 17
  • 23
5

The border-radius shorthand property can be used to define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four lengths or percentages.

The Syntax:

[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

Examples:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;

I your case 

span {
    border-radius: 100px;
    background: #000;
    color : white;
    padding : 10px 15px;


}

Check this Demo http://jsfiddle.net/daWcc/

Rupesh Pawar
  • 1,887
  • 12
  • 17
1

In addition to the other solutions, http://css3pie.com/ does a great job as a polyfill for old internet explorer versions

EDIT: not necessary as of 2016

Urs
  • 4,984
  • 7
  • 54
  • 116
  • 3
    Hey downvoter, this answer is nearly 3 years old - it worked very well at the time and still does for legacy browsers – Urs Feb 25 '16 at 17:11
  • Depends on the question :-) – Urs May 23 '16 at 15:40
  • 3
    It's not *still* wrong, it *became* wrong over time with changing context. Actually I wondered if there's a meta post about that theme? It may hurt, but I agree it's a good thing if you can lose points if your (in this case, my) answer outdates - that contributes to the health of SO. – Urs May 23 '16 at 15:43