diff --git a/.changeset/good-rice-cover.md b/.changeset/good-rice-cover.md
new file mode 100644
index 0000000000..74eb5fa712
--- /dev/null
+++ b/.changeset/good-rice-cover.md
@@ -0,0 +1,10 @@
+---
+"@utrecht/number-badge-css": minor
+"@utrecht/components": minor
+"@utrecht/component-library-css": minor
+"@utrecht/component-library-react": minor
+"@utrecht/component-library-vue": minor
+"@utrecht/web-component-library-stencil": minor
+---
+
+Add `utrecht.number-badge.border-color` and `utrecht.number-badge.border-width` design tokens.
diff --git a/components/number-badge/src/_mixin.scss b/components/number-badge/src/_mixin.scss
index c0dc04f9fa..7da03a0821 100644
--- a/components/number-badge/src/_mixin.scss
+++ b/components/number-badge/src/_mixin.scss
@@ -7,7 +7,13 @@
 @mixin utrecht-number-badge {
   /* Limit size to `max-content`, so the badge will not be stretched out of proportion inside a flexbox */
   background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0 0% 0%)));
+  border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));
   border-radius: var(--utrecht-number-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
+  border-style: solid;
+  border-width: max(
+    var(--utrecht-number-badge-border-width, var(--utrecht-badge-border-width, 0)),
+    var(--_utrecht-number-badge-min-border-width, 0)
+  );
   color: var(--utrecht-number-badge-color, var(--utrecht-badge-color, hsl(0 0% 100%)));
   display: inline-block;
   font-family: var(
@@ -33,3 +39,12 @@
   text-decoration: none; /* no inheritance */
   white-space: nowrap;
 }
+
+@mixin utrecht-number-badge--media-query-forced-colors {
+  @media screen and (forced-colors: active) {
+    /* Warning: there layout difference because of the added 1px border */
+    --_utrecht-number-badge-min-border-width: 1px;
+
+    border-color: currentColor;
+  }
+}
diff --git a/components/number-badge/src/index.scss b/components/number-badge/src/index.scss
index d2ec3dba7b..f58bbd0d6f 100644
--- a/components/number-badge/src/index.scss
+++ b/components/number-badge/src/index.scss
@@ -9,5 +9,5 @@
 
 .utrecht-number-badge {
   @include utrecht-number-badge;
-  @include utrecht-badge--media-query-forced-colors;
+  @include utrecht-number-badge--media-query-forced-colors;
 }
diff --git a/components/number-badge/src/tokens.json b/components/number-badge/src/tokens.json
index 797296ae03..5e0ae3eb1c 100644
--- a/components/number-badge/src/tokens.json
+++ b/components/number-badge/src/tokens.json
@@ -2,7 +2,6 @@
   "utrecht": {
     "number-badge": {
       "background-color": {
-        "comment": "Default background color for badge components",
         "$extensions": {
           "nl.nldesignsystem.css.property": {
             "syntax": "<color>",
@@ -13,8 +12,18 @@
         },
         "type": "color"
       },
+      "border-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.fallback": ["utrecht.badge.border-color"],
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "color"
+      },
       "border-radius": {
-        "comment": "Default corner radius for badge components",
         "$extensions": {
           "nl.nldesignsystem.css.property": {
             "syntax": "<length-percentage>",
@@ -25,6 +34,17 @@
         },
         "type": "borderRadius"
       },
+      "border-width": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.fallback": ["utrecht.badge.border-width"],
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "borderWidth"
+      },
       "color": {
         "comment": "Default text color for badge components",
         "$extensions": {
diff --git a/packages/storybook-css/src/NumberBadge.stories.tsx b/packages/storybook-css/src/NumberBadge.stories.tsx
index 8c2a36ae97..b7bc50b41d 100644
--- a/packages/storybook-css/src/NumberBadge.stories.tsx
+++ b/packages/storybook-css/src/NumberBadge.stories.tsx
@@ -33,8 +33,8 @@ const NumberBadgeStory = ({ children, dir, lang, value }: PropsWithChildren<Numb
 };
 
 const meta = {
-  title: 'CSS Component/Badge Counter',
-  id: 'css-badge-counter',
+  title: 'CSS Component/Number Badge',
+  id: 'css-number-badge',
   component: NumberBadgeStory,
   args: {
     children: '4',
@@ -54,7 +54,7 @@ const meta = {
     figma:
       'https://www.figma.com/design/UXIHcIurAD8hyoBWx4hDBV/NLDS---Gemeente-Utrecht---Bibliotheek?node-id=1233-4271&t=kJatlKfN59e8T0eA-0',
     nldesignsystem: 'https://nldesignsystem.nl/number-badge',
-    tokensPrefix: 'utrecht-badge-counter',
+    tokensPrefix: 'utrecht-number-badge',
     status: {
       type: 'WORK IN PROGRESS',
     },
@@ -263,7 +263,7 @@ export const Empty: Story = {
     docs: {
       ...Default.parameters?.['docs'],
       description: {
-        story: `Wanneer de counter badge leeg is, zoals in een UI designer interface, dan moet de component wel zichtbaar zijn. De gebruiker moet er een getal in kunnen typen.`,
+        story: `Wanneer de Number Badge leeg is, zoals in een UI designer interface, dan moet de component wel zichtbaar zijn. De gebruiker moet er een getal in kunnen typen.`,
       },
     },
   },