CSS Examples
How to Create a Circle using CSS
In this example, we will learn how to create a circle using CSS. We will be using the height, width, border, and border-radius property.
Prerequisites
Example
HTML
<div class="circle"></div>CSS
.circle{
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 50%;
}Output
Here, the values width:50px and height: 50px is specified to create a square and the border: 1px solid black sets a black colored border of 1px thickness. The border-radius: 50% transforms the square into a circle.
Conclusion
In this example, we learned how to create a circle using CSS. We used the height, width,and border properties to create a square and then transformed it into a circle by defining border-radius: 50%.