How to Create Circles with CSS

There are many techniques used to create a circle. In our snippet, we’ll demonstrate some examples with the CSS border-radius property, as well as with the HTML <canvas> and SVG <circle> elements.

The most common one is using the border-radius property. We just need to set the border-radius property to 50% on the needed element to create curved corners.

As you’ve already noticed, it’s quite easy. Now let’s start with creating HTML.

Create HTML

  • Use two <div> elements and add classes to them.
<div class="circleBase circle1"></div>
<div class="circleBase circle2"></div>

Add CSS

  • Set the border-radius to 50% for the “.circleBase”.
  • Set the width, height, background, and border properties for the "circle1" and "circle2" classes separately.
.circleBase {
  border-radius: 50%;
}

.circle1 {
  width: 100px;
  height: 100px;
  background: #4bc475;
  border: 1px solid #000;
}

.circle2 {
  width: 150px;
  height: 150px;
  background: #a1a1a1;
  border: 1px solid #000;
}

Now you can see the full example.

Example of creating circles using <div> elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .circleBase {
        border-radius: 50%;
      }
      .circle1 {
        width: 100px;
        height: 100px;
        background: #4bc475;
        border: 1px solid #000;
      }
      .circle2 {
        width: 150px;
        height: 150px;
        background: #a1a1a1;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div class="circleBase circle1"></div>
    <div class="circleBase circle2"></div>
  </body>
</html>

Result

The method that we used in the example above is the simplest one and has good browser support.

Now, let’s see an example, where we use <span> elements within a <div>. Here, we also specify the display as “inline-block” and add the text-align property set to “center” to the <div> to align the circles to the center.

Example of creating circles using <span> elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .circle {
        height: 25px;
        width: 25px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
      }
      div {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>Circles</h1>
      <span class="circle"></span>
      <span class="circle"></span>
      <span class="circle"></span>
      <span class="circle"></span>
    </div>
  </body>
</html>

In our next example, we create a circular <div> and place a text inside it.

Example of creating a circle with a text inside:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #circle {
        background: #cfcfcf;
        width: 128px;
        height: 128px;
        border-radius: 64px;
        border: 2px solid #000;
      }
      #circle div {
        position: relative;
        left: 19px;
        top: 19px;
        width: 90px;
        height: 90px;
        color: #000;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="circle">
      <div>Example of a circular div</div>
    </div>
  </body>
</html>

In the following example, we create a responsive circle. Here, we set a percentage width and border-radius for the container. Then, we add an empty block of padding-bottom to the :after pseudo-element. Thus we can have the same result of creating a container with equal width and height.

Example of creating a responsive circle:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .rescircle {
        width: 20%;
        border-radius: 50%;
        background: #b5b5b5;
      }
      .rescircle:after {
        content: "";
        display: block;
        padding-bottom: 100%;
      }
    </style>
  </head>
  <body>
    <div class="rescircle"></div>
  </body>
</html>

Example of creating a circle with the SVG <circle> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="150" width="150">
      <circle cx="60" cy="60" r="50" stroke="blue" stroke-width="2" fill="lightblue" />
    </svg>
  </body>
</html>

Example of creating a circle with the HTML <canvas> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="canvas" width="300" height="100"></canvas>
    <script>
      var canvas=document.getElementById('canvas');
      var context=canvas.getContext('2d');
      var centerX=canvas.width / 2;
      var centerY=canvas.height / 2;
      var radius=40;
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle='lightgreen';
      context.fill();
      context.lineWidth=2;
      context.strokeStyle="green";
      context.stroke();
    </script>
  </body>
</html>

Try also creating circles and other geometric shapes with our tool called Geometric Images.