diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 7c04f2199c..0175ba40b5 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -1126,6 +1126,10 @@
         color-mix(in srgb, hsl(0deg 0% 0%) 10%, hsl(232deg 20% 92%)),
         hsl(0deg 0% 0% / 80%)
     );
+    --color-compose-recipient-box-hover: light-dark(
+        hsl(0deg 0% 69%),
+        hsl(0deg 0% 100% / 12%)
+    );
     --color-compose-recipient-box-has-focus: light-dark(
         hsl(0deg 0% 57%),
         hsl(0deg 0% 100% / 27%)
diff --git a/web/styles/compose.css b/web/styles/compose.css
index 104c0f3688..d922644d23 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -1092,6 +1092,10 @@ textarea.new_message_textarea {
     transition: border-color 0.2s ease;
     background: var(--color-compose-recipient-box-background-color);
 
+    &:hover {
+        border-color: var(--color-compose-recipient-box-hover);
+    }
+
     /* Give the recipient box, a `<div>`, the
        correct styles when focus is in the
        #stream_message_recipient_topic `<input>` */
@@ -1195,6 +1199,11 @@ textarea.new_message_textarea {
     background-color: var(--color-compose-recipient-box-background-color);
     border-color: var(--color-compose-recipient-box-border-color);
 
+    &:hover,
+    &.widget-open {
+        border-color: var(--color-compose-recipient-box-hover);
+    }
+
     &.dropdown-widget-button {
         /* We control the surrounding space through the
            grid on `.dropdown_widget_value`. */