CSS Single Element Shapes Circles and Ellipses
Example
Circle
To create a circle, define an element with an equal width and height (a square) and then set the border-radius property of this element to 50%.
HTML
<div class="circle"></div>
CSS
.circle {
width: 50px;
height: 50px;
background: rgb(246, 156, 85);
border-radius: 50%;
}
Ellipse
An ellipse is similar to a circle, but with different values for width and height.
HTML
<div class="oval"></div>
CSS
.oval {
width: 50px;
height: 80px;
background: rgb(246, 156, 85);
border-radius: 50%;
}
