diff --git a/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs b/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
index 45e336a2f0f..3bb4fde6653 100644
--- a/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
+++ b/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
@@ -1,22 +1,24 @@
 {{#each categories as |c|}}
-  <div class='category-box category-box-{{unbound c.slug}}'>
-    <a href={{c.url}}>
-      <div class='category-box-heading'>
-        {{#if c.uploaded_logo.url}}
-          {{cdn-img src=c.uploaded_logo.url class="logo"}}
-        {{/if}}
-
-        <h3>
-          {{#if c.read_restricted}}
-            {{fa-icon 'lock'}}
+  <div class='category-box category-box-{{unbound c.slug}}' style={{border-color c.color}}>
+    <div class='category-box-inner'>
+      <a href={{c.url}}>
+        <div class='category-box-heading'>
+          {{#if c.uploaded_logo.url}}
+            {{cdn-img src=c.uploaded_logo.url class="logo"}}
           {{/if}}
-          {{c.name}}
-        </h3>
-      </div>
 
-      <div class='description'>
-        {{{text-overflow class="overflow" text=c.description_excerpt}}}
-      </div>
-    </a>
+          <h3>
+            {{#if c.read_restricted}}
+              {{fa-icon 'lock'}}
+            {{/if}}
+            {{c.name}}
+          </h3>
+        </div>
+
+        <div class='description'>
+          {{{text-overflow class="overflow" text=c.description_excerpt}}}
+        </div>
+      </a>
+    </div>
   </div>
 {{/each}}
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index 642f7974f39..5d88a6155cf 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -12,7 +12,9 @@
     align-content: flex-start;
 
     box-sizing: border-box;
-    border: 2px solid blend-primary-secondary(20%);
+    border-width: 0 0 0 6px;
+    border-style: solid;
+    border-color: blend-primary-secondary(20%);
 
     .mobile-view & {
       width: 100%;
@@ -29,6 +31,14 @@
     }
   }
 
+  .category-box-inner {
+    width: 100%;
+    padding: 0;
+    border-width: 2px 2px 2px 0;
+    border-style: solid;
+    border-color: blend-primary-secondary(20%);
+  }
+
   &.no-logos {
     .logo {
       display: none;
@@ -83,16 +93,6 @@
     width: 31%;
     margin: 0 1% 1.5em 1%;
     padding: 0;
-    border-width: 0 0 0 6px;
-    border-style: solid;
-    border-color: blend-primary-secondary(20%);
-  }
-  .category-box-inner {
-    width: 100%;
-    padding: 0;
-    border-width: 2px 2px 2px 0;
-    border-style: solid;
-    border-color: blend-primary-secondary(20%);
   }
 
   h3 {