How to Create Circular Div in HTML and CSS

In this tutorial, we will learn how to create circular div in HTML and CSS. Sometimes when you are working on a website, you want to give different shapes to a div to make your website look good in terms of appearance.

By default, the div is a rectangular-shaped box, but by using CSS border-radius properties, you can easily make a circular div. Please note that, when creating a circular div, the width and height of the div should be the same.

In the following example, we will demonstrate how you can create a circular div. Please have a look over the code example and the steps given below.


  • In the HTML file, we have one empty div element.
  • In the head element, we have added a stylesheet style.css using the link element.
<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circular Div</title>
    <link rel="stylesheet" href="./style.CSS">

    <div class="circular"></div>


We are selecting the div using the class name .circular and setting the border property value to 5px solid red; height and width property value to 100px; margin property value to 0 auto to horizontally center align the div; and the border-radius property value has been set to 50%. As a result, it will create a circular div.

.circular {
    border: 5px solid red;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    margin: 0 auto;