diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 7e2768357d..cfcf779ad7 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -569,7 +569,7 @@
        preserve an apparent border around
        them, and a square aspect-ratio, even under
        `box-sizing: border-box` in the area. */
-    --length-input-pill-image: calc(var(--height-input-pill) - 2px);
+    --length-search-input-pill-image: calc(var(--height-input-pill) - 2px);
     --length-input-pill-exit: 1.1429em; /* 16px at 14px/em */
     --input-pill-side-padding: 0.3571em; /* 5px at 14px/em */
     --vertical-spacing-input-pill: 2px;
@@ -1808,6 +1808,10 @@
         hsl(240deg 70% 70% / 30%),
         hsl(240deg 52% 60% / 45%)
     );
+    --color-border-input-pill-image: light-dark(
+        hsl(237deg 68% 94% / 50%),
+        hsl(240deg 65% 60% / 60%)
+    );
     --color-focus-outline-input-pill: light-dark(
         hsl(240deg 50% 50%),
         hsl(0deg 0% 100% / 60%)
diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
index 6b783f3572..7b2f4f0577 100644
--- a/web/styles/input_pill.css
+++ b/web/styles/input_pill.css
@@ -27,7 +27,6 @@
         margin: 0;
 
         color: inherit;
-        border: 1px solid transparent;
 
         border-radius: 4px;
         background-color: var(--color-background-input-pill);
@@ -39,11 +38,21 @@
         }
 
         .pill-image {
-            height: var(--length-input-pill-image);
-            width: var(--length-input-pill-image);
+            height: var(--height-input-pill);
+            width: var(--height-input-pill);
             border-radius: 4px;
         }
 
+        .pill-image-border {
+            height: var(--height-input-pill);
+            width: var(--height-input-pill);
+            position: absolute;
+            box-sizing: border-box;
+            border: 1px solid;
+            border-radius: 4px;
+            border-color: var(--color-border-input-pill-image);
+        }
+
         .zulip-icon {
             padding-right: 2px;
         }
diff --git a/web/styles/search.css b/web/styles/search.css
index f8f046abf8..5a325e3ee9 100644
--- a/web/styles/search.css
+++ b/web/styles/search.css
@@ -266,6 +266,7 @@
                can contain multiple user pills that wrap onto
                new lines. */
             height: unset;
+            border: 1px solid transparent;
 
             > .pill-label {
                 min-width: fit-content;
@@ -294,12 +295,21 @@
                 min-width: 4.5em;
                 display: grid;
                 grid-template-columns:
-                    var(--length-input-pill-image) minmax(0, 1fr)
+                    var(--length-search-input-pill-image) minmax(0, 1fr)
                     var(--length-input-pill-exit);
                 align-content: center;
                 /* Don't inherit large line-height for user pills themselves, either. */
                 line-height: 1.1;
 
+                .pill-image {
+                    height: var(--length-search-input-pill-image);
+                    width: var(--length-search-input-pill-image);
+                }
+
+                .pill-image-border {
+                    border: none;
+                }
+
                 &:not(.deactivated-pill) {
                     background-color: var(--color-background-user-pill);
                 }
diff --git a/web/templates/input_pill.hbs b/web/templates/input_pill.hbs
index 88ae25550c..983778c031 100644
--- a/web/templates/input_pill.hbs
+++ b/web/templates/input_pill.hbs
@@ -1,6 +1,7 @@
 <div class='pill {{#if deactivated}} deactivated-pill {{/if}}'{{#if user_id}}data-user-id="{{user_id}}"{{/if}}{{#if group_id}}data-user-group-id="{{group_id}}"{{/if}}{{#if stream_id}}data-stream-id="{{stream_id}}"{{/if}} tabindex=0>
     {{#if has_image}}
     <img class="pill-image" src="{{img_src}}" />
+    <div class="pill-image-border"></div>
     {{#if deactivated}}
         <span class="fa fa-ban slashed-circle-icon"></span>
     {{/if}}
diff --git a/web/templates/search_user_pill.hbs b/web/templates/search_user_pill.hbs
index 904ea71cf0..482366c45c 100644
--- a/web/templates/search_user_pill.hbs
+++ b/web/templates/search_user_pill.hbs
@@ -6,6 +6,7 @@
     {{#each users}}
         <div class="pill{{#if deactivated}} deactivated-pill{{/if}}" data-user-id="{{this.user_id}}">
             <img class="pill-image" src="{{this.img_src}}" />
+            <div class="pill-image-border"></div>
             {{#if deactivated}}
             <span class="fa fa-ban slashed-circle-icon"></span>
             {{/if}}
diff --git a/web/tests/search.test.cjs b/web/tests/search.test.cjs
index a1471c8e3b..7f3149a8f1 100644
--- a/web/tests/search.test.cjs
+++ b/web/tests/search.test.cjs
@@ -209,13 +209,13 @@ run_test("initialize", ({override, override_rewire, mock_template}) => {
             let expected_value = `<div class="search_list_item">\n    <span>Search for zo</span>\n</div>\n`;
             assert.equal(opts.highlighter_html(source[0]), expected_value);
 
-            expected_value = `<div class="search_list_item">\n    <span>sent by</span>\n        <span class="pill-container">\n            <div class='pill ' tabindex=0>\n    <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1" />\n    <span class="pill-label">\n        <span class="pill-value">\n            &lt;strong&gt;Zo&lt;/strong&gt;e\n        </span></span>\n    <div class="exit">\n        <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n    </div>\n</div>\n        </span>\n</div>\n`;
+            expected_value = `<div class="search_list_item">\n    <span>sent by</span>\n        <span class="pill-container">\n            <div class='pill ' tabindex=0>\n    <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1" />\n    <div class="pill-image-border"></div>\n    <span class="pill-label">\n        <span class="pill-value">\n            &lt;strong&gt;Zo&lt;/strong&gt;e\n        </span></span>\n    <div class="exit">\n        <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n    </div>\n</div>\n        </span>\n</div>\n`;
             assert.equal(opts.highlighter_html(source[1]), expected_value);
 
-            expected_value = `<div class="search_list_item">\n    <span>direct messages with</span>\n        <span class="pill-container">\n            <div class='pill ' tabindex=0>\n    <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1" />\n    <span class="pill-label">\n        <span class="pill-value">\n            &lt;strong&gt;Zo&lt;/strong&gt;e\n        </span></span>\n    <div class="exit">\n        <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n    </div>\n</div>\n        </span>\n</div>\n`;
+            expected_value = `<div class="search_list_item">\n    <span>direct messages with</span>\n        <span class="pill-container">\n            <div class='pill ' tabindex=0>\n    <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1" />\n    <div class="pill-image-border"></div>\n    <span class="pill-label">\n        <span class="pill-value">\n            &lt;strong&gt;Zo&lt;/strong&gt;e\n        </span></span>\n    <div class="exit">\n        <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n    </div>\n</div>\n        </span>\n</div>\n`;
             assert.equal(opts.highlighter_html(source[2]), expected_value);
 
-            expected_value = `<div class="search_list_item">\n    <span>group direct messages including</span>\n        <span class="pill-container">\n            <div class='pill ' tabindex=0>\n    <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1" />\n    <span class="pill-label">\n        <span class="pill-value">\n            &lt;strong&gt;Zo&lt;/strong&gt;e\n        </span></span>\n    <div class="exit">\n        <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n    </div>\n</div>\n        </span>\n</div>\n`;
+            expected_value = `<div class="search_list_item">\n    <span>group direct messages including</span>\n        <span class="pill-container">\n            <div class='pill ' tabindex=0>\n    <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1" />\n    <div class="pill-image-border"></div>\n    <span class="pill-label">\n        <span class="pill-value">\n            &lt;strong&gt;Zo&lt;/strong&gt;e\n        </span></span>\n    <div class="exit">\n        <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n    </div>\n</div>\n        </span>\n</div>\n`;
             assert.equal(opts.highlighter_html(source[3]), expected_value);
 
             /* Test sorter */