diff --git a/src/button/button.styles.ts b/src/button/button.styles.ts
index 52321c50..30a98844 100644
--- a/src/button/button.styles.ts
+++ b/src/button/button.styles.ts
@@ -26,6 +26,7 @@ import {
 	buttonSecondaryForeground,
 	buttonSecondaryHoverBackground,
 	contrastActiveBorder,
+	cornerRadiusRound,
 	designUnit,
 	disabledOpacity,
 	focusBorder,
@@ -62,7 +63,7 @@ const BaseButtonStyles = css`
 		line-height: ${typeRampBaseLineHeight};
 		color: ${buttonPrimaryForeground};
 		background: ${buttonPrimaryBackground};
-		border-radius: 2px;
+		border-radius: calc(${cornerRadiusRound} * 1px);
 		fill: currentColor;
 		cursor: pointer;
 	}
diff --git a/src/design-tokens.ts b/src/design-tokens.ts
index d1cb6acd..7d4339b2 100644
--- a/src/design-tokens.ts
+++ b/src/design-tokens.ts
@@ -29,6 +29,7 @@ export const borderWidth = create<number>('border-width').withDefault(1);
 export const contrastActiveBorder = create<string>('contrast-active-border', '--vscode-contrastActiveBorder').withDefault('#f38518');
 export const contrastBorder = create<string>('contrast-border', '--vscode-contrastBorder').withDefault('#6fc3df');
 export const cornerRadius = create<number>('corner-radius').withDefault(0);
+export const cornerRadiusRound = create<number>('corner-radius-round').withDefault(2);
 export const designUnit = create<number>('design-unit').withDefault(4);
 export const disabledOpacity = create<number>('disabled-opacity').withDefault(0.4);
 export const focusBorder = create<string>('focus-border', '--vscode-focusBorder').withDefault('#007fd4');
diff --git a/src/text-area/text-area.styles.ts b/src/text-area/text-area.styles.ts
index 21f71aef..d2db6043 100644
--- a/src/text-area/text-area.styles.ts
+++ b/src/text-area/text-area.styles.ts
@@ -11,7 +11,7 @@ import {
 } from '@microsoft/fast-foundation';
 import {
 	borderWidth,
-	cornerRadius,
+	cornerRadiusRound,
 	designUnit,
 	disabledOpacity,
 	dropdownBorder,
@@ -44,7 +44,7 @@ export const textAreaStyles = (
 		position: relative;
 		color: ${inputForeground};
 		background: ${inputBackground};
-		border-radius: calc(${cornerRadius} * 1px);
+		border-radius: calc(${cornerRadiusRound} * 1px);
 		border: calc(${borderWidth} * 1px) solid ${dropdownBorder};
 		font: inherit;
 		font-size: ${typeRampBaseFontSize};
diff --git a/src/text-field/text-field.styles.ts b/src/text-field/text-field.styles.ts
index 6853b9a6..65a940fd 100644
--- a/src/text-field/text-field.styles.ts
+++ b/src/text-field/text-field.styles.ts
@@ -11,7 +11,7 @@ import {
 } from '@microsoft/fast-foundation';
 import {
 	borderWidth,
-	cornerRadius,
+	cornerRadiusRound,
 	designUnit,
 	disabledOpacity,
 	dropdownBorder,
@@ -42,7 +42,7 @@ export const textFieldStyles = (
 		flex-direction: row;
 		color: ${inputForeground};
 		background: ${inputBackground};
-		border-radius: calc(${cornerRadius} * 1px);
+		border-radius: calc(${cornerRadiusRound} * 1px);
 		border: calc(${borderWidth} * 1px) solid ${dropdownBorder};
 		height: calc(${inputHeight} * 1px);
 		min-width: ${inputMinWidth};