diff --git a/app/assets/javascripts/discourse/app/helpers/border-color.js b/app/assets/javascripts/discourse/app/helpers/border-color.js
index bbe98456502..7272a76586d 100644
--- a/app/assets/javascripts/discourse/app/helpers/border-color.js
+++ b/app/assets/javascripts/discourse/app/helpers/border-color.js
@@ -1,3 +1,3 @@
 import { htmlHelper } from "discourse-common/lib/helpers";
 
-export default htmlHelper((color) => `border-color: #${color}`);
+export default htmlHelper((color) => `border-color: #${color}; `);
diff --git a/app/assets/javascripts/discourse/app/helpers/category-color-variable.js b/app/assets/javascripts/discourse/app/helpers/category-color-variable.js
new file mode 100644
index 00000000000..4ad1cdcea79
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/helpers/category-color-variable.js
@@ -0,0 +1,3 @@
+import { htmlHelper } from "discourse-common/lib/helpers";
+
+export default htmlHelper((color) => `--category-color: #${color};`);
diff --git a/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs b/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs
index f11790e5c20..0a041d8cc09 100644
--- a/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs
@@ -1,5 +1,5 @@
 {{#each categories as |c|}}
-  <div data-notification-level={{c.notificationLevelString}} style={{unless noCategoryStyle (border-color c.color)}} class="category category-box category-box-{{c.slug}} {{if c.isMuted "muted"}} {{if noCategoryStyle "no-category-boxes-style"}}">
+  <div data-notification-level={{c.notificationLevelString}} style={{unless noCategoryStyle (concat (border-color c.color) (category-color-variable c.color))}} class="category category-box category-box-{{c.slug}} {{if c.isMuted "muted"}} {{if noCategoryStyle "no-category-boxes-style"}}">
     <div class="category-box-inner">
       <div class="category-box-heading">
         <a href={{c.url}}>
diff --git a/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs b/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs
index d1d03e36fa0..255d4838803 100644
--- a/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs
@@ -1,6 +1,6 @@
 {{#each categories as |c|}}
   {{plugin-outlet name="category-box-before-each-box" args=(hash category=c)}}
-  <div style={{unless noCategoryStyle (border-color c.color)}} data-category-id={{c.id}} data-notification-level={{c.notificationLevelString}} data-url={{c.url}} class="category category-box category-box-{{c.slug}} {{if c.isMuted "muted"}} {{if noCategoryStyle "no-category-boxes-style"}}">
+  <div style={{unless noCategoryStyle (concat (border-color c.color) (category-color-variable c.color))}} data-category-id={{c.id}} data-notification-level={{c.notificationLevelString}} data-url={{c.url}} class="category category-box category-box-{{c.slug}} {{if c.isMuted "muted"}} {{if noCategoryStyle "no-category-boxes-style"}}">
     <div class="category-box-inner">
       {{#unless c.isMuted}}
         <div class="category-logo">
diff --git a/app/assets/javascripts/discourse/app/templates/components/parent-category-row.hbs b/app/assets/javascripts/discourse/app/templates/components/parent-category-row.hbs
index 8c78be04e6e..a00118be6e6 100644
--- a/app/assets/javascripts/discourse/app/templates/components/parent-category-row.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/parent-category-row.hbs
@@ -1,7 +1,7 @@
 {{#unless isHidden}}
   {{plugin-outlet name="category-list-above-each-category" args=(hash category=category)}}
   <tr data-category-id={{category.id}} data-notification-level={{category.notificationLevelString}} class="{{if category.description_excerpt "has-description" "no-description"}} {{if category.uploaded_logo.url "has-logo" "no-logo"}}">
-    <td class="category {{if isMuted "muted"}} {{if noCategoryStyle "no-category-style"}}" style={{unless noCategoryStyle (border-color category.color)}}>
+    <td class="category {{if isMuted "muted"}} {{if noCategoryStyle "no-category-style"}}" style={{unless noCategoryStyle (concat (border-color category.color) (category-color-variable category.color))}}>
       {{category-title-link category=category}}
       {{plugin-outlet name="below-category-title-link" connectorTagName="div" args=(hash category=category)}}
       {{#if category.description_excerpt}}