andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
8ea3775a1036fc2c38f67e61ea850685c7674aeb
30-seconds-of-code/snippets/circle.md
atomiks 744670ef76 Add circle snippet
2018-03-04 16:19:52 +10:00

795 B
Raw Blame History

Circle

Creates a circle shape with pure CSS.

HTML

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

CSS

.circle {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  background: #333;
}

Demo

<style> .snippet-demo__circle { border-radius: 50%; width: 2rem; height: 2rem; background: #333; } </style>

Explanation

border-radius: 50% curves the borders of an 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.

Browser support

✅ No caveats.