From bc795324d5d821734b54df8f8522888895baa0d6 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 29 Jul 2022 13:21:11 +1000
Subject: [PATCH] BorderControl: Add box sizing reset (#42754)

---
 packages/components/CHANGELOG.md                 |  8 ++++++++
 packages/components/src/border-control/styles.ts |  3 ++-
 packages/components/src/utils/box-sizing.ts      | 14 ++++++++++++++
 packages/components/src/utils/style-mixins.js    |  1 +
 4 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/src/utils/box-sizing.ts

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 21186137eefacf..86033f9413f1cb 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+### Bug Fix
+
+-   `BorderControl`: Ensure box-sizing is reset for the control ([#42754](https://github.com/WordPress/gutenberg/pull/42754)).
+
+### Enhancements
+
+-   Add `box-sizing` reset style mixin to utils ([#42754](https://github.com/WordPress/gutenberg/pull/42754)).
+
 ## 19.16.0 (2022-07-27)
 
 ### Bug Fix
diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
index c379ebe17054c4..3c49e53a350ee6 100644
--- a/packages/components/src/border-control/styles.ts
+++ b/packages/components/src/border-control/styles.ts
@@ -6,7 +6,7 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { COLORS, CONFIG, rtl } from '../utils';
+import { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';
 import { space } from '../ui/utils/space';
 import {
 	StyledField,
@@ -31,6 +31,7 @@ export const borderControl = css`
 	border: 0;
 	padding: 0;
 	margin: 0;
+	${ boxSizingReset }
 `;
 
 export const innerWrapper = () => css`
diff --git a/packages/components/src/utils/box-sizing.ts b/packages/components/src/utils/box-sizing.ts
new file mode 100644
index 00000000000000..1e7eabaf1d9f51
--- /dev/null
+++ b/packages/components/src/utils/box-sizing.ts
@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+export const boxSizingReset = css`
+	box-sizing: border-box;
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: inherit;
+	}
+`;
diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js
index dfacc79b0fb399..a2827af3412783 100644
--- a/packages/components/src/utils/style-mixins.js
+++ b/packages/components/src/utils/style-mixins.js
@@ -1,3 +1,4 @@
+export { boxSizingReset } from './box-sizing';
 export { rgba } from './colors';
 export { reduceMotion } from './reduce-motion';
 export { rtl } from './rtl';