From 744670ef762447df519bf48511ac46c7fe769b4a Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Sun, 4 Mar 2018 16:19:52 +1000
Subject: [PATCH] Add circle snippet

---
 snippets/circle.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 snippets/circle.md

diff --git a/snippets/circle.md b/snippets/circle.md
new file mode 100644
index 000000000..60e373e18
--- /dev/null
+++ b/snippets/circle.md
@@ -0,0 +1,50 @@
+### Circle
+
+Creates a circle shape with pure CSS.
+
+#### HTML
+
+```html
+<div class="circle"></div>
+```
+
+#### CSS
+
+```css
+.circle {
+  border-radius: 50%;
+  width: 2rem;
+  height: 2rem;
+  background: #333;
+}
+```
+
+#### Demo
+
+<div class="snippet-demo">
+  <div class="snippet-demo__circle"></div>
+</div>
+
+<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
+
+<span class="snippet__support-note">✅ No caveats.</span>
+
+* https://caniuse.com/#feat=border-radius
+
+<!-- tags: visual -->