CODEWITHSUNDEEP
csscss-shapes
Jitendra Vyas
Jitendra Vyas

Reputation: 152677

How to make a circle around content using CSS?

Like this

circle around content

With only this code

<span>1</span>

Upvotes: 78

Views: 131007

Answers (5)

Jose Rui Santos
Jose Rui Santos

Reputation: 15319

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

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

div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #555;
  color: yellow;
  min-width: 1em;
  border-radius: 50%;
  vertical-align: middle;
}

div:before {
  content:'';
  float: left;
  width: auto;
  padding-bottom: 100%;
}
<div>Circles</div>
<div>that</div>
<div>expand</div>
<div>with</div>
<div>content</div>
<br>
<div contenteditable>Try it out now! TYPE HERE...</div>

Upvotes: 135

Urs
Urs

Reputation: 5122

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

Upvotes: 1

Shawn Taylor
Shawn Taylor

Reputation: 3969

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.

Upvotes: 6

Rupesh Pawar
Rupesh Pawar

Reputation: 1917

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/

Upvotes: 5

Curtis
Curtis

Reputation: 103358

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/

Upvotes: 6

Related Questions