Circles and Ellipses
suggest changeCircle
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%
.
![](/essential/css/img/58e80a3334e453941d9cc1d6566ece2aa526eb75.png)
Screenshot
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
.
![](/essential/css/img/fce30e70be06ad8eba54b91625181cd9b4927b19.png)
Screenshot
HTML
<div class="oval"></div>
CSS
.oval {
width: 50px;
height: 80px;
background: rgb(246, 156, 85);
border-radius: 50%;
}
Found a mistake? Have a question or improvement idea?
Let me know.
Table Of Contents