How to Make a Circle in HTML
In this article, we will see how to make a circle in HTML and CSS. Without CSS we can’t create a circle, So you should use the CSS.
There are two different ways to make a circle.
Step-by-step guide to creating a circle
Method1: (clip-path)
<html>
<head>
<title>Circle</title>
</head>
<style type="text/css">
body{
display: flex;
}
.circle{
background: blue;
width: 400px;
clip-path: circle();
}
</style>
<body>
<div class="circle"></div>
</body>
</html>Output:
In this method, we use the CSS “clip-path” property. If you use this property, you must set the body style to “display: flex”, only then will it work.
- In the above code, first, we create a div with classname ‘circle‘.
- Then select the body using the CSS tag selector and set the style to “display: flex”.
- Select the classname circle using CSS class selector(dot operator) and set style to “clip-path: circle()”
- Set the width and background color to the classname ‘circle’ as in the above code.
- See the above output, the circle is displayed successfully.
Method 2 (Border-radius)
<html>
<head>
<title>Circle</title>
</head>
<style type="text/css">
.circle{
width: 400px;
height: 400px;
border-radius: 50%;
background-color: red;
}
</style>
<body>
<div class="circle"></div>
</body>
</html>Output:
- In the above code, we create a div with classname ‘circle‘.
- In CSS, select the classname ‘circle’ using the CSS class selector.
- Set the same width and height using the CSS “width & height property” as in the above code.
- Then set the CSS “border-radius” property to 50% for classname ‘circle’. And set desired background color using “background-color” property
- See the above output, the circle is displayed in red color.