diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index d79662eef..9c0b30f0f 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -52,6 +52,7 @@
   --focus-ring-color: var(--color-link);
   --focus-ring-offset: 1px;
   --focus-ring-size: 2px;
+  --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color);
 
   /* Dialogs */
   --dialog-duration: 150ms;
diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 0693cd05e..0419e0548 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -166,6 +166,18 @@
     }
   }
 
+  .card-perma__image-btn {
+    &:has(input[type="file"]:focus),
+    &:has(input[type="file"]:focus-visible) {
+      outline: var(--focus-ring) !important;
+      outline-offset: var(--focus-ring-offset);
+    }
+
+    input[type="file"] {
+      outline: none;
+    }
+  }
+
   .card__banner {
     align-items: center;
     background-color: var(--color-highlight);
diff --git a/app/views/cards/container/_image.html.erb b/app/views/cards/container/_image.html.erb
index 92e5b4f0b..6f0fceea0 100644
--- a/app/views/cards/container/_image.html.erb
+++ b/app/views/cards/container/_image.html.erb
@@ -5,7 +5,7 @@
   <% end %>
 <% elsif !card.closed? %>
   <%= form_with model: card, data: { controller: "form" } do |form| %>
-    <label class="btn input--file" data-controller="tooltip">
+    <label class="card-perma__image-btn btn input--file" data-controller="tooltip">
       <%= icon_tag "picture-add" %>
       <span class="for-screen-reader">Add background image</span>