Circles and Ellipses

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%.

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.

Screenshot

HTML

<div class="oval"></div>

CSS

.oval {
  width: 50px;
  height: 80px;
  background: rgb(246, 156, 85);
  border-radius: 50%;
}