Essential Books

Circles and Ellipses

suggest change

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%;
}
Found a mistake? Have a question or improvement idea? Let me know.

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:

Single element shapes:
* Single Element Shapes
* Triangles
* Trapezoid
* Circles and Ellipses
* Bursts
* Square
* Cube
* Pyramid
Table Of Contents