diff --git a/assets/css/common/md-content.css b/assets/css/common/md-content.css
index ea4cc75b..4585aa27 100644
--- a/assets/css/common/md-content.css
+++ b/assets/css/common/md-content.css
@@ -230,8 +230,17 @@ mark {
 }
 
 audio {
-    width: stretch;
-    max-width: 100%;
+    display: block;
+    width: 100%;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    height: 2.5rem;
+    margin-bottom: var(--content-gap);
+}
+
+audio::-webkit-media-controls-enclosure {
+    border-radius: 0;
 }
 
 video {
diff --git a/layouts/shortcodes/audio.html b/layouts/shortcodes/audio.html
index 1497a75c..c98b5f3b 100644
--- a/layouts/shortcodes/audio.html
+++ b/layouts/shortcodes/audio.html
@@ -1,2 +1,2 @@
 {{ $src := (.Get "src") }}
-<audio src="{{ $src }}" controls muted></audio>
+<audio src="{{ $src }}" controls muted loading="lazy"></audio>