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.

circular div element

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.

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment