From d3dc1bf018480527f5de6ad73ba54c566f3f613f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oskar=20Wickstr=C3=B6m?= <oskar@wickstrom.tech>
Date: Sat, 25 Jan 2025 13:20:07 +0100
Subject: [PATCH] make radio buttons round

---
 index.css  | 4 ++++
 index.html | 5 +++++
 2 files changed, 9 insertions(+)

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