diff --git a/change/@fluentui-web-components-5dc3f7fb-7d68-4ca4-b499-a860985ffc30.json b/change/@fluentui-web-components-5dc3f7fb-7d68-4ca4-b499-a860985ffc30.json
new file mode 100644
index 0000000000000..9b94b23160ad2
--- /dev/null
+++ b/change/@fluentui-web-components-5dc3f7fb-7d68-4ca4-b499-a860985ffc30.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add border and adjust padding to badge component",
+  "packageName": "@fluentui/web-components",
+  "email": "khamu@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/badge/badge.styles.ts b/packages/web-components/src/badge/badge.styles.ts
index 58961a6fb11cb..83f7913c521c6 100644
--- a/packages/web-components/src/badge/badge.styles.ts
+++ b/packages/web-components/src/badge/badge.styles.ts
@@ -8,6 +8,7 @@ import {
   foregroundOnAccentRest,
   neutralFillRest,
   neutralForegroundRest,
+  strokeWidth,
   typeRampMinus1FontSize,
   typeRampMinus1LineHeight,
 } from '../design-tokens';
@@ -26,7 +27,8 @@ export const badgeStyles: (
 
     .control {
       border-radius: calc(${controlCornerRadius} * 1px);
-      padding: calc(${designUnit} * 0.5px) calc(${designUnit} * 1px);
+      padding: calc(((${designUnit} * 0.5) - ${strokeWidth}) * 1px) calc((${designUnit} - ${strokeWidth}) * 1px);
+      border: calc(${strokeWidth} * 1px) solid transparent;
     }
 
     :host(.lightweight) .control {