back to blog overview

Creating Circles with CSS & HTML

There are some details in CSS which are not obvious to implement. One of these is the creation of circles. Here is a short receipe for CSS circles.

It’s easy to create a box in CSS. But what about a circle? Ok, we can create a graphic for this, but the good news is that it is as simple as a box in CSS. Our result will look like the graphic below.

CSS circle

First we create a simple HTML structure consisting of a div with a class="circle".

    <div class="circle">
        This is a div circle with text.

The next step is to give the circle class a width and height in a style. Then we give the box a border. Don’t forget to set the border style to solid. Otherwise nothing happens. Add a text alignment and padding. And now the magic step: Simply set the border radius to a value greater than width/height divided by two. In our case this is 100px. The padding makes the box bigger since it is added to this size. Therefore our box is 120px * 120px. When we set the border-radius to 70px we get a circle. Here is the full code.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>CSS Circle</title>
            width: 100px;
            height: 100px;
            border: 1px;
            border-style: solid;
            text-align: center;
            padding: 20px;
            border-radius: 70px;
            border-color: #5c8ce2;
            background-color: #5c8ce2;
    <div class="circle">
        This is a div circle with text.
December 3, 2020
Words: 300 | Reading Time: 2 min

back to blog overview

back to home page