30-seconds-of-code/snippets/circle.md

title, tags, cover, firstSeen, lastUpdated

title	tags	cover	firstSeen	lastUpdated
Circle	visual	blog_images/oven-paddle.jpg	2018-03-04T08:19:52+02:00	2020-12-30T15:37:37+02:00

Creates a circular shape with pure CSS.

• Use border-radius: 50% to curve the borders of the element to create a circle.
• Since a circle has the same radius at any given point, the width and height must be the same. Differing values will create an ellipse.

<div class="circle"></div>

.circle {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #9C27B0;
}