How to make a circle in html

Learn how to create a perfect circle in HTML using CSS and the border-radius property with this simple tutorial. Example included!

Creating a circle in HTML can be achieved using CSS to style a div element. The key is to set the border-radius property to 50% to ensure the element is displayed as a circle.

First, let's create a div element in the HTML file:

<div class="circle"></div>

Next, we can style the div element using CSS. We'll set the width and height to define the size of the circle, and then use the border-radius property to create the circular shape:

.circle {
  width: 100px;
  height: 100px;
  background-color: #f00; /* optional: set the circle's color */
  border-radius: 50%;
}

By setting the border-radius property to 50%, the div element will be displayed as a circle rather than the default rectangular shape.

Finally, let's add some content to the circle using the ::after pseudo-element. This will allow us to add text or other content inside the circle:

.circle::after {
  content: "Circle";
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

By using CSS to style a div element, we can easily create a circle in HTML and customize its appearance as needed.