diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index 07dbe586770..750d1627f2d 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -670,6 +670,11 @@ aside.onebox.stackexchange .onebox-body {
       margin-right: 0.5em;
     }
   }
+  &.category-onebox {
+    border: 1px solid var(--primary-low);
+    padding-left: calc(1em - 5px);
+    margin-left: 5px;
+  }
 }
 
 .onebox.gfycat p {
diff --git a/lib/onebox/templates/discourse_category_onebox.mustache b/lib/onebox/templates/discourse_category_onebox.mustache
index 68f41074adf..fb8ddd3300c 100644
--- a/lib/onebox/templates/discourse_category_onebox.mustache
+++ b/lib/onebox/templates/discourse_category_onebox.mustache
@@ -1,10 +1,13 @@
-<aside class="onebox" style="border-left: 5px solid #{{color}}">
-  <article class="onebox-body category-onebox">
+<aside class="onebox category-onebox" style="box-shadow: -5px 0px #{{color}};">
+  <article class="onebox-body category-onebox-body">
     {{#logo_url}}
       <img src="{{logo_url}}" class="thumbnail" />
     {{/logo_url}}
     <h3>
       <a class="badge-wrapper bullet" href="{{url}}">
+        {{#color}}
+          <span class="badge-category-bg" style="background-color: #{{{color}}}"></span>
+        {{/color}}
         <span class="clear-badge"><span>{{{name}}}</span></span>
       </a>
     </h3>