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.
HTML
- In the HTML file, we have one empty
divelement. - In the head element, we have added a stylesheet
style.cssusing the link element.
<!DOCTYPE html>
<html lang="en">
<head>
<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">
</head>
<body>
<div class="circular"></div>
</body>
</html>
CSS
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;
}
