diff --git a/index.css b/index.css
index a752dde..ac7a8fe 100644
--- a/index.css
+++ b/index.css
@@ -327,6 +327,10 @@ input[type=radio]:checked:before {
   height: calc(var(--line-height) / 2);
   background: var(--text-color);
 }
+input[type=radio],
+input[type=radio]:before {
+  border-radius: 100%;
+}
 
 button:focus, input:focus {
   --border-thickness: 3px;
diff --git a/index.html b/index.html
index 8aa0511..e07d84e 100644
--- a/index.html
+++ b/index.html
@@ -203,6 +203,11 @@ Save
 name <input type="text" placeholder="Text goes here..." /></label>
 <label>Age <input type="text" value="30" /></label>
 </form>
+<form class="grid">
+<label><input name="radio" type="radio" /> One</label>
+<label><input name="radio" type="radio" /> Two</label>
+<label><input name="radio" type="radio" /> Three</label>
+</form>
 <h2 id="grids">Grids</h2>
 <p>Add the <code>grid</code> class to a container to divide up the
 horizontal space evenly for the cells. Note that it maintains the