diff --git a/changes/336-overlay-focus-ring.md b/changes/336-overlay-focus-ring.md
new file mode 100644
index 00000000..7596f35d
--- /dev/null
+++ b/changes/336-overlay-focus-ring.md
@@ -0,0 +1,4 @@
+type: fixed
+area: overlay
+
+- Hid the browser focus outline on the top-level overlay surface so focused overlays no longer show a yellow/orange viewport border.
diff --git a/src/renderer/overlay-legacy-cleanup.test.ts b/src/renderer/overlay-legacy-cleanup.test.ts
index 4566f270..34dff015 100644
--- a/src/renderer/overlay-legacy-cleanup.test.ts
+++ b/src/renderer/overlay-legacy-cleanup.test.ts
@@ -28,6 +28,11 @@ test('renderer stylesheet no longer contains invisible-layer selectors', () => {
   assert.doesNotMatch(cssSource, /body\.layer-invisible/);
 });
 
+test('renderer stylesheet hides focus chrome on top-level overlay focus targets', () => {
+  const cssSource = readWorkspaceFile('src/renderer/style.css');
+  assert.match(cssSource, /html:focus,\s*body:focus,\s*#overlay:focus\s*\{[^}]*outline:\s*none;/s);
+});
+
 test('top-level readme avoids stale overlay-layers wording', () => {
   const readmeSource = readWorkspaceFile('README.md');
   assert.doesNotMatch(readmeSource, /overlay layers/i);
diff --git a/src/renderer/style.css b/src/renderer/style.css
index 44c0001b..050e1cd8 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -40,6 +40,12 @@ body {
     'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Arial Unicode MS', Arial, sans-serif;
 }
 
+html:focus,
+body:focus,
+#overlay:focus {
+  outline: none;
+}
+
 :root {
   --subtitle-sidebar-reserved-width: 0px;