• Post category:HTML

How to Make a Circle in HTML | Step-by-Step Guide

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:

how to make a circle in html

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.

  1. In the above code, first, we create a div with classname ‘circle‘.
  2. Then select the body using the CSS tag selector and set the style to “display: flex”.
  3. Select the classname circle using CSS class selector(dot operator) and set style to “clip-path: circle()”
  4. Set the width and background color to the classname ‘circle’ as in the above code.
  5. 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:

how to make a circle in html

  1. In the above code, we create a div with classname ‘circle‘.
  2. In CSS, select the classname ‘circle’ using the CSS class selector.
  3. Set the same width and height using the CSS “width & height property” as in the above code.
  4. Then set the CSS “border-radius” property to 50% for classname ‘circle’. And set desired background color using “background-color” property
  5. See the above output, the circle is displayed in red color.

Leave a Reply