diff --git a/change/@fluentui-web-components-9b068149-136c-4fb3-bf14-ebd4fb7e6923.json b/change/@fluentui-web-components-9b068149-136c-4fb3-bf14-ebd4fb7e6923.json
new file mode 100644
index 0000000000000..069c269e42b2b
--- /dev/null
+++ b/change/@fluentui-web-components-9b068149-136c-4fb3-bf14-ebd4fb7e6923.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "update web component corner radius token value to 4",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/design-tokens.ts b/packages/web-components/src/design-tokens.ts
index 21fcd66e451b1..c435846045a99 100644
--- a/packages/web-components/src/design-tokens.ts
+++ b/packages/web-components/src/design-tokens.ts
@@ -42,7 +42,7 @@ export const bodyFont = create<string>('body-font').withDefault('Segoe UI, sans-
 export const baseHeightMultiplier = create<number>('base-height-multiplier').withDefault(8);
 export const baseHorizontalSpacingMultiplier = create<number>('base-horizontal-spacing-multiplier').withDefault(3);
 export const baseLayerLuminance = create<number>('base-layer-luminance').withDefault(StandardLuminance.LightMode);
-export const cornerRadius = create<number>('corner-radius').withDefault(2);
+export const cornerRadius = create<number>('corner-radius').withDefault(4);
 export const density = create<number>('density').withDefault(0);
 export const designUnit = create<number>('design-unit').withDefault(4);
 export const direction = create<Direction>('direction').withDefault(Direction.ltr);