Sometimes, we want to create a circle div than using an image with CSS.
In this article, we’ll look at how to create a circle div than using an image with CSS.
How to create a circle div than using an image with CSS?
To create a circle div than using an image with CSS, we use the border-radius property.
For instance, we write
<div class="circleBase type1"></div>
<div class="circleBase type2"></div>
<div class="circleBase type2"></div>
<div class="circleBase type3"></div>
to add a few divs.
Then we write
.circleBase {
border-radius: 50%;
}
.type1 {
width: 100px;
height: 100px;
background: yellow;
border: 3px solid red;
}
.type2 {
width: 50px;
height: 50px;
background: #ccc;
border: 3px solid #000;
}
.type3 {
width: 500px;
height: 500px;
background: aqua;
border: 30px solid blue;
}
to add the styles to make the divs circles.
We use border-radius: 50%; to make the divs circles.
And we show the border with the border property.
We also set the width and height of the divs to set the circle’s dimensions
Conclusion
To create a circle div than using an image with CSS, we use the border-radius property.
