CSS Single Element Shapes Circles and Ellipses

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

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

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%;
}


Got any CSS Question?