diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 25c9981a..2ccb7e4b 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -180,7 +180,10 @@ p {
 
 img {
   max-width: 100%;
-  border-radius: var(--docs-border-radius);
+}
+
+.badges img {
+  border-radius: var(--sl-border-radius-medium);
 }
 
 .callout img,
diff --git a/docs/pages/index.md b/docs/pages/index.md
index 82713e4f..53dad4e2 100644
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -27,6 +27,8 @@ toc: false
 </div>
 </div>
 
+<div class="badges">
+
 [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@shoelace-style/shoelace/badge)](https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace)
 [![npm](https://img.shields.io/npm/dw/@shoelace-style/shoelace?label=npm&style=flat-square)](https://www.npmjs.com/package/@shoelace-style/shoelace)
 [![License](https://img.shields.io/badge/license-MIT-232323.svg?style=flat-square)](https://github.com/shoelace-style/shoelace/blob/next/LICENSE.md)<br>
@@ -34,6 +36,8 @@ toc: false
 [![Twitter](https://img.shields.io/badge/Twitter-Follow-00acee.svg?style=flat-square&logo=twitter&logoColor=white)](https://twitter.com/shoelace_style)
 [![Sponsor](https://img.shields.io/badge/GitHub-Code-232323.svg?style=flat-square&logo=github&logoColor=white)](https://github.com/shoelace-style/shoelace)
 
+</div>
+
 ## Quick Start
 
 Add the following code to your page.