Easier way to create circle div than using an image?

Multiple circle sizes using CSS

Setting up the structure

You can create multiple classes for circles having different sizes, thereby achieving scalability and reusability:

.small-circle { width: 50px; height: 50px; border-radius: 50%; background: skyblue; } /* Baby circle */
.medium-circle { width: 100px; height: 100px; border-radius: 50%; background: blue; } /* Medium-rare circle */
.large-circle { width: 150px; height: 150px; border-radius: 50%; background: navy; } /* Biggie circle */


Then in your HTML, just assign the desired class name:

<div class="small-circle"></div> /* Small circle */
<div class="medium-circle"></div> /* Medium circle */
<div class="large-circle"></div> /* Large circle */


Compatibility across different browsers

For good-natured browsers ancestry, use vendor prefixes:

.circle {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 50%; /* for our Apple-loving friends */
  -moz-border-radius: 50%;    /* Mozilla says Hi */
  border-radius: 50%;         /* A circle is born */
  background: blue;           /* Color the baby blue */
}


For prehistoric Internet Explorer versions, turn to CSS3 PIE, a savior enabling CSS3 properties including border-radius.

Styling circle with pseudo-elements

Adding details inside or layering can be achieved with pseudo-elements ::before and ::after:

.circle::before {
  content: '';
  width: 80px;
  height: 80px;
  border-radius: 50%; /* Surprise! Another circle */
  background: white;
  position: absolute;
  top: 10px;
  left: 10px;
}


Experiment with clip-path CSS property for circular artistry.

Visualising the circle options...

Giving your circles buddies (inline display!)

For togetherness between circles and text, bring display: inline-block into play:

.circle {
  display: inline-block; /* Circle joins the line dance */
  /* ...other styles... */
}


Adding the WOW factor

Shadow effects can be obtained with box-shadow, and other funky effects with filter:

.circle {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Like a soft whisper...a shadow approaches */
  filter: brightness(1.2); /* Lights, camera, ACTION */
  /* ...other styles... */
}


Bringing in a splash of color

To glamorize your circles, gradients are at your service. Be it linear-gradient or radial-gradient for a more dynamic appeal:

.circle {
  background: linear-gradient(to right, red, orange); /* Sunrise or sunset? */
  /* ...other styles... */
}


Image-based circle, friend or foe?

While CSS circles have scalability and styling versatility, weigh it against complex design requirements and performance trade-offs of image files.