diff --git a/index.css b/index.css
index abddf45..a752dde 100644
--- a/index.css
+++ b/index.css
@@ -311,7 +311,8 @@ input, button, textarea {
   -webkit-appearance: none;
 }
 
-input[type=checkbox] {
+input[type=checkbox],
+input[type=radio] {
   display: inline-grid;
   place-content: center;
   vertical-align: top;
@@ -319,7 +320,8 @@ input[type=checkbox] {
   height: var(--line-height);
   cursor: pointer;
 }
-input[type=checkbox]:checked:before {
+input[type=checkbox]:checked:before,
+input[type=radio]:checked:before {
   content: "";
   width: 1ch;
   height: calc(var(--line-height) / 2);
diff --git a/index.md b/index.md
index cc227b4..b3f649f 100644
--- a/index.md
+++ b/index.md
@@ -134,6 +134,14 @@ And inputs:
 <label>Age <input type="text" value="30" /></label>
 </form>
 
+And radio buttons:
+
+<form class="grid">
+<label><input name="radio" type="radio" /> Option #1</label>
+<label><input name="radio" type="radio" /> Option #2</label>
+<label><input name="radio" type="radio" /> Option #3</label>
+</form>
+
 ## Grids
 
 Add the `grid` class to a container to divide up the horizontal space evenly for the cells.