diff --git a/static/js/stream_color.js b/static/js/stream_color.js
index d09ff67b44..2b2282a676 100644
--- a/static/js/stream_color.js
+++ b/static/js/stream_color.js
@@ -49,7 +49,8 @@ function update_table_stream_color(table, stream_name, color) {
         if ($.trim($label.text()) === stream_name) {
             var messages = $label.closest(".recipient_row").children(".message_row");
             messages.children(".messagebox").css("box-shadow", "inset 2px 0px 0px 0px " + style + ", -1px 0px 0px 0px " + style);
-            $label.css({background: style});
+            $label.css({background: style,
+                          "border-left-color": style});
             $label.removeClass(exports.color_classes);
             $label.addClass(color_class);
         }
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 8ac0e4e6c9..b6289898c1 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -746,7 +746,11 @@ td.pointer {
     font-weight: normal;
     height: 17px;
     line-height: 17px;
+    border-top-color: hsla(0, 0%, 0%, 0.0);
+    border-right-color: hsla(0, 0%, 0%, 0.0);
+    border-bottom-color: hsla(0, 0%, 0%, 0.0);
     background-color: hsl(0, 0%, 88%);
+    border-left-color: hsl(0, 0%, 88%);
     border-width: 0px;
     position: relative;
     text-decoration: none;
@@ -766,9 +770,41 @@ td.pointer {
     text-decoration: none;
 }
 
+.stream_label:after {
+    left: 100%;
+    top: 50%;
+    content: " ";
+    height: 0px;
+    width: 0px;
+    position: absolute;
+    pointer-events: none;
+    margin-top: -11px;
+    border-style: solid;
+    border-width: 11px 0 11px 5px;
+    border-color: inherit;
+    z-index: 2;
+    -moz-transform: scale(.9999);
+}
+
+.stream_label:before {
+    left: 100%;
+    top: 50%;
+    content: " ";
+    height: 0px;
+    width: 0px;
+    position: absolute;
+    pointer-events: none;
+    margin-top: -14px;
+    border-style: solid;
+    border-width: 14px 0 14px 6px;
+    border-color: hsla(0, 0%, 0%, 0.0) hsla(0, 0%, 0%, 0.0) hsla(0, 0%, 0%, 0.0) #ffffff;
+    z-index: 1;
+    -moz-transform: scale(.9999);
+}
+
 .stream_topic {
     display: inline-block;
-    padding: 3px 4px 2px 7px;
+    padding: 3px 3px 2px 12px;
     margin-left: -5px;
     height: 17px;
     line-height: 17px;
@@ -1001,6 +1037,7 @@ td.pointer {
     font-size: 14px;
     height: 17px;
     line-height: 17px;
+    border-left-color: hsl(0, 0%, 27%);
 }
 
 /* Base color backgrounds for messageboxes,
diff --git a/static/templates/recipient_row.handlebars b/static/templates/recipient_row.handlebars
index d3519a59b5..3302f0553b 100644
--- a/static/templates/recipient_row.handlebars
+++ b/static/templates/recipient_row.handlebars
@@ -4,7 +4,7 @@
         <div class="message-header-contents">
             {{! stream link }}
             <a class="message_label_clickable narrows_by_recipient stream_label {{color_class}}"
-                style="background: {{background_color}};"
+                style="background: {{background_color}}; border-left-color: {{background_color}};"
                 href="{{stream_url}}"
                 title="{{#tr this}}Narrow to stream &quot;__display_recipient__&quot;{{/tr}}">
                 {{! invite only lock }}