How to make a DIV circular in CSS

DIVs are often used in conjunction with other HTML elements, such as images and tables, to create a layout for a web page or web application. It allows web developers to create circular shapes using CSS without having to use images or JavaScript libraries.

In this tutorial, we will see how to make a div circular in CSS.

Step 1 : Create DIV element.

First, create two DIV elements with any class name for example .red and .green.

<div class="red"></div>
<div class="green"></div>

Step 2 : Make the DIV element rounded.

Now, add style to the class i.e.

.red{
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 10px;
  text-align: center;
  border-radius: 100%;
}

.green{
  width: 200px;
  height: 200px;
  background-color: green;
  margin: 10px;
  text-align: center;
  border-radius: 100%;
}

Here you can see I have added border-radius: 100%; that will make the DIV element circular.

You can also make the DIV element rounded rectangle by giving the different border-radius value.