How to Make a Circle Around Content Using CSS

How to draw a circle with text in the middle?

Setting a line-height the same value as the height of the div will show one line of text vertically centered. In this example the height and line-height are 500px.

Example

JSFiddle

.circle {
  width: 500px;
  height: 500px;
  line-height: 500px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000
}

<div class="circle">Hello I am A Circle</div>

Pseudo class ::before - create css circle

You also need to set content, height and display to make it actually render the pseudo element.

Example:

    .subway-item::before{
       content: '';
       display: inline-block;
       width: 15px;
       height: 15px;
       -moz-border-radius: 7.5px;
       -webkit-border-radius: 7.5px;
       border-radius: 7.5px;
       background-color: #69b6d5;
    }

<div class="subway-item"></div>

Draw Circle using css alone

You could use a .before with a content with a unicode symbol for a circle (25CF).

.circle:before {  content: ' \25CF';  font-size: 200px;}

<span class="circle"></span>

How to make a border to circle in css

Set width and height to an equal value und add border-radius: 50%;.

.circle {width: 60px;height:60px;border-radius: 50%;background-color: #bada55;}

<div class="circle"></div>

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

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>