diff --git a/app/assets/javascripts/discourse/app/components/categories-boxes-with-topics.hbs b/app/assets/javascripts/discourse/app/components/categories-boxes-with-topics.hbs
index bb6a83be3c7..10480daa034 100644
--- a/app/assets/javascripts/discourse/app/components/categories-boxes-with-topics.hbs
+++ b/app/assets/javascripts/discourse/app/components/categories-boxes-with-topics.hbs
@@ -1,12 +1,7 @@
 {{#each this.categories as |c|}}
   <div
     data-notification-level={{c.notificationLevelString}}
-    style={{unless
-      this.noCategoryStyle
-      (html-safe
-        (concat (border-color c.color) (category-color-variable c.color))
-      )
-    }}
+    style={{unless this.noCategoryStyle (category-color-variable c.color)}}
     class="category category-box category-box-{{c.slug}}
       {{if c.isMuted 'muted'}}
       {{if this.noCategoryStyle 'no-category-boxes-style'}}"
diff --git a/app/assets/javascripts/discourse/app/components/categories-boxes.hbs b/app/assets/javascripts/discourse/app/components/categories-boxes.hbs
index 630de171c08..cddedd2a074 100644
--- a/app/assets/javascripts/discourse/app/components/categories-boxes.hbs
+++ b/app/assets/javascripts/discourse/app/components/categories-boxes.hbs
@@ -5,12 +5,7 @@
   />
 
   <div
-    style={{unless
-      this.noCategoryStyle
-      (html-safe
-        (concat (border-color c.color) (category-color-variable c.color))
-      )
-    }}
+    style={{unless this.noCategoryStyle (category-color-variable c.color)}}
     data-category-id={{c.id}}
     data-notification-level={{c.notificationLevelString}}
     data-url={{c.url}}
diff --git a/app/assets/javascripts/discourse/app/components/parent-category-row.hbs b/app/assets/javascripts/discourse/app/components/parent-category-row.hbs
index 0f1fe35e100..8b521eef36f 100644
--- a/app/assets/javascripts/discourse/app/components/parent-category-row.hbs
+++ b/app/assets/javascripts/discourse/app/components/parent-category-row.hbs
@@ -20,12 +20,7 @@
         {{if this.noCategoryStyle 'no-category-style'}}"
       style={{unless
         this.noCategoryStyle
-        (html-safe
-          (concat
-            (border-color this.category.color)
-            (category-color-variable this.category.color)
-          )
-        )
+        (category-color-variable this.category.color)
       }}
     >
       <CategoryTitleLink @category={{this.category}} />
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index 80eedde0147..861c4f62ca4 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -58,7 +58,7 @@
     border-width: 0;
     border-left-width: 6px;
     border-style: solid;
-    border-color: var(--primary-low);
+    border-color: var(--category-color, var(--primary-low));
 
     .mobile-view & {
       width: 100%;
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index 90d95baac6a..9b8b0b06cb1 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@@ -92,7 +92,7 @@
 
   tbody {
     .category {
-      border-left: 6px solid;
+      border-left: 6px solid var(--category-color, var(--primary-low));
       h3,
       h4 {
         line-height: var(--line-height-medium);