diff --git a/web/src/style.css b/web/src/style.css
index 8f8fb23..f389d7d 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -1039,20 +1039,20 @@ button[type="submit"]:disabled:not(.btn-icon),
   cursor: progress;
 }
 
-/* A small square, transparent icon button -- every "add to X" form (a
-   kanban column, the inbox, the status list, the "all tasks" new-card form)
-   used a full "Add" label until there were enough of them on screen at once
-   to feel cluttered. Ghost styling and the hover colour change match
-   .title-back. Excluded (":not(.btn-icon)" above and on the
-   .field-row/.kanban__new overrides) rather than out-specificity'd, so it
-   isn't at the mercy of source order -- the same reasoning as .field's low
-   specificity against input:focus. */
+/* A small square icon button, bordered like the compact field it sits
+   beside -- every "add to X" form (a kanban column, the inbox, the status
+   list, the "all tasks" new-card form) used a full "Add" label until there
+   were enough of them on screen at once to feel cluttered, then a borderless
+   ghost icon on its own looked adrift next to that field. Excluded
+   (":not(.btn-icon)" above and on the .field-row/.kanban__new overrides)
+   rather than out-specificity'd, so it isn't at the mercy of source order --
+   the same reasoning as .field's low specificity against input:focus. */
 .btn-icon {
   flex: none;
   width: 2rem;
   height: 2rem;
   padding: 0;
-  border: none;
+  border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   background: transparent;
   color: var(--muted);
@@ -1065,6 +1065,7 @@ button[type="submit"]:disabled:not(.btn-icon),
 }
 
 .btn-icon:hover:not(:disabled) {
+  border-color: var(--accent);
   color: var(--accent);
 }