diff --git a/src/core/Block/__snapshots__/Block.test.tsx.snap b/src/core/Block/__snapshots__/Block.test.tsx.snap
index 95f2af47d..6913df0a6 100644
--- a/src/core/Block/__snapshots__/Block.test.tsx.snap
+++ b/src/core/Block/__snapshots__/Block.test.tsx.snap
@@ -25,6 +25,11 @@ exports[`calling render with the same component on the same container does not r
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
diff --git a/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
index 690427b3e..92bc40610 100644
--- a/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -24,6 +24,11 @@ exports[`calling render with the same component on the same container does not r
   text-decoration: underline;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c4:hover,
 .c4:active,
 .c4:focus,
@@ -54,6 +59,11 @@ exports[`calling render with the same component on the same container does not r
   display: list-item;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -75,6 +85,11 @@ exports[`calling render with the same component on the same container does not r
   max-width: 100%;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -101,6 +116,11 @@ exports[`calling render with the same component on the same container does not r
   padding-left: 40px;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c7 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -125,6 +145,11 @@ exports[`calling render with the same component on the same container does not r
   white-space: normal;
 }
 
+.c7::before,
+.c7::after {
+  box-sizing: border-box;
+}
+
 .c6 {
   display: inline-block;
   vertical-align: baseline;
diff --git a/src/core/Button/__snapshots__/Button.test.tsx.snap b/src/core/Button/__snapshots__/Button.test.tsx.snap
index c080adfa6..4da9e3768 100644
--- a/src/core/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/core/Button/__snapshots__/Button.test.tsx.snap
@@ -49,6 +49,11 @@ exports[`Button variant default should match snapshot 1`] = `
   height: auto;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -321,6 +326,11 @@ exports[`Button variant inverted should match snapshot 1`] = `
   height: auto;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -593,6 +603,11 @@ exports[`Button variant secondary should match snapshot 1`] = `
   height: auto;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -865,6 +880,11 @@ exports[`Button variant secondary-noborder should match snapshot 1`] = `
   height: auto;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -1137,6 +1157,11 @@ exports[`Button variant tertiary match snapshot 1`] = `
   height: auto;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
diff --git a/src/core/Chip/__snapshots__/Chip.test.tsx.snap b/src/core/Chip/__snapshots__/Chip.test.tsx.snap
index 877384f43..8a687dffa 100644
--- a/src/core/Chip/__snapshots__/Chip.test.tsx.snap
+++ b/src/core/Chip/__snapshots__/Chip.test.tsx.snap
@@ -49,6 +49,11 @@ exports[`children should match snapshot 1`] = `
   height: auto;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -73,6 +78,11 @@ exports[`children should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -237,6 +247,11 @@ exports[`classnames should match snapshot 1`] = `
   height: auto;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -261,6 +276,11 @@ exports[`classnames should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -421,6 +441,11 @@ exports[`disabled should match snapshot 1`] = `
   height: auto;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -445,6 +470,11 @@ exports[`disabled should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
diff --git a/src/core/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/src/core/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index e7f88c999..86f781824 100644
--- a/src/core/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/src/core/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -21,6 +21,11 @@ exports[`Basic dropdown should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -45,6 +50,11 @@ exports[`Basic dropdown should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -69,6 +79,11 @@ exports[`Basic dropdown should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c1 .fi-dropdown_label-p {
   margin-bottom: 8px;
   -webkit-letter-spacing: 0;
@@ -237,6 +252,11 @@ exports[`Controlled Dropdown should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -261,6 +281,11 @@ exports[`Controlled Dropdown should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -285,6 +310,11 @@ exports[`Controlled Dropdown should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c1 .fi-dropdown_label-p {
   margin-bottom: 8px;
   -webkit-letter-spacing: 0;
@@ -454,6 +484,11 @@ exports[`Dropdown as action menu should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -478,6 +513,11 @@ exports[`Dropdown as action menu should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -502,6 +542,11 @@ exports[`Dropdown as action menu should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c1 .fi-dropdown_label-p {
   margin-bottom: 8px;
   -webkit-letter-spacing: 0;
@@ -670,6 +715,11 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -694,6 +744,11 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -718,6 +773,11 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c1 .fi-dropdown_label-p {
   margin-bottom: 8px;
   -webkit-letter-spacing: 0;
@@ -886,6 +946,11 @@ exports[`Dropdown with hidden label should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -910,6 +975,11 @@ exports[`Dropdown with hidden label should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   position: absolute;
   -webkit-clip: rect(0 0 0 0);
diff --git a/src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap b/src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap
index f0bce3e2b..c60d273ec 100644
--- a/src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap
+++ b/src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap
@@ -49,6 +49,11 @@ exports[`Basic expander shoud match snapshot 1`] = `
   height: auto;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -73,6 +78,11 @@ exports[`Basic expander shoud match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -97,6 +107,11 @@ exports[`Basic expander shoud match snapshot 1`] = `
   white-space: normal;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c5 {
   position: absolute;
   -webkit-clip: rect(0 0 0 0);
diff --git a/src/core/Expander/ExpanderContent/__snapshots__/ExpanderContent.test.tsx.snap b/src/core/Expander/ExpanderContent/__snapshots__/ExpanderContent.test.tsx.snap
index 8480ce8b0..dc98d9096 100644
--- a/src/core/Expander/ExpanderContent/__snapshots__/ExpanderContent.test.tsx.snap
+++ b/src/core/Expander/ExpanderContent/__snapshots__/ExpanderContent.test.tsx.snap
@@ -25,6 +25,11 @@ exports[`Basic ExpanderContent shoud match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
diff --git a/src/core/Expander/ExpanderGroup/__snapshots__/ExpanderGroup.test.tsx.snap b/src/core/Expander/ExpanderGroup/__snapshots__/ExpanderGroup.test.tsx.snap
index 7ef2ce405..2336e0e48 100644
--- a/src/core/Expander/ExpanderGroup/__snapshots__/ExpanderGroup.test.tsx.snap
+++ b/src/core/Expander/ExpanderGroup/__snapshots__/ExpanderGroup.test.tsx.snap
@@ -49,6 +49,11 @@ exports[`Basic expander group should match snapshot 1`] = `
   height: auto;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -73,6 +78,11 @@ exports[`Basic expander group should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -97,6 +107,11 @@ exports[`Basic expander group should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   position: absolute;
   -webkit-clip: rect(0 0 0 0);
diff --git a/src/core/Expander/ExpanderTitle/__snapshots__/ExpanderTitle.test.tsx.snap b/src/core/Expander/ExpanderTitle/__snapshots__/ExpanderTitle.test.tsx.snap
index d3cf1b772..91e9ad498 100644
--- a/src/core/Expander/ExpanderTitle/__snapshots__/ExpanderTitle.test.tsx.snap
+++ b/src/core/Expander/ExpanderTitle/__snapshots__/ExpanderTitle.test.tsx.snap
@@ -49,6 +49,11 @@ exports[`Basic ExpanderTitle shoud match snapshot 1`] = `
   height: auto;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -73,6 +78,11 @@ exports[`Basic ExpanderTitle shoud match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -97,6 +107,11 @@ exports[`Basic ExpanderTitle shoud match snapshot 1`] = `
   white-space: normal;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   position: absolute;
   -webkit-clip: rect(0 0 0 0);
diff --git a/src/core/Expander/ExpanderTitleButton/__snapshots__/ExpanderTitleButton.test.tsx.snap b/src/core/Expander/ExpanderTitleButton/__snapshots__/ExpanderTitleButton.test.tsx.snap
index 6106b7645..240f98e74 100644
--- a/src/core/Expander/ExpanderTitleButton/__snapshots__/ExpanderTitleButton.test.tsx.snap
+++ b/src/core/Expander/ExpanderTitleButton/__snapshots__/ExpanderTitleButton.test.tsx.snap
@@ -49,6 +49,11 @@ exports[`Basic ExpanderTitleButton shoud match snapshot 1`] = `
   height: auto;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -73,6 +78,11 @@ exports[`Basic ExpanderTitleButton shoud match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -97,6 +107,11 @@ exports[`Basic ExpanderTitleButton shoud match snapshot 1`] = `
   white-space: normal;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   display: inline-block;
   vertical-align: baseline;
diff --git a/src/core/Form/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/core/Form/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 11d32d031..1bbaa11d7 100644
--- a/src/core/Form/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/core/Form/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -25,6 +25,11 @@ exports[`props children has matching snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -53,6 +58,11 @@ exports[`props children has matching snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -73,6 +83,11 @@ exports[`props children has matching snapshot 1`] = `
   max-width: 100%;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
diff --git a/src/core/Form/FilterInput/__snapshots__/FilterInput.test.tsx.snap b/src/core/Form/FilterInput/__snapshots__/FilterInput.test.tsx.snap
index 09e4e22df..758d58330 100644
--- a/src/core/Form/FilterInput/__snapshots__/FilterInput.test.tsx.snap
+++ b/src/core/Form/FilterInput/__snapshots__/FilterInput.test.tsx.snap
@@ -25,6 +25,11 @@ exports[`snapshot matches 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -53,6 +58,11 @@ exports[`snapshot matches 1`] = `
   opacity: 0.54;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -77,6 +87,11 @@ exports[`snapshot matches 1`] = `
   white-space: normal;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c2.fi-label-text .fi-label-text_label-span {
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
diff --git a/src/core/Form/RadioButton/RadioButton.baseStyles.tsx b/src/core/Form/RadioButton/RadioButton.baseStyles.tsx
index 9f9f8a69c..be0250a64 100644
--- a/src/core/Form/RadioButton/RadioButton.baseStyles.tsx
+++ b/src/core/Form/RadioButton/RadioButton.baseStyles.tsx
@@ -42,6 +42,7 @@ export const baseStyles = withSuomifiTheme(
             border-radius: 50%;
             border: 1px solid ${theme.colors.depthDark3};
             background: transparent;
+            box-sizing: content-box;
           }
           /* Radio input circle when selected */
           &::after {
diff --git a/src/core/Form/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/src/core/Form/RadioButton/__snapshots__/RadioButton.test.tsx.snap
index a07dc04c1..70dfe8cb4 100644
--- a/src/core/Form/RadioButton/__snapshots__/RadioButton.test.tsx.snap
+++ b/src/core/Form/RadioButton/__snapshots__/RadioButton.test.tsx.snap
@@ -25,6 +25,11 @@ exports[`children should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -53,6 +58,11 @@ exports[`children should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -73,6 +83,11 @@ exports[`children should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -126,6 +141,7 @@ exports[`children should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c1.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
@@ -272,6 +288,11 @@ exports[`className should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -300,6 +321,11 @@ exports[`className should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -320,6 +346,11 @@ exports[`className should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -373,6 +404,7 @@ exports[`className should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c1.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
@@ -519,6 +551,11 @@ exports[`disabled should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -547,6 +584,11 @@ exports[`disabled should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -567,6 +609,11 @@ exports[`disabled should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -620,6 +667,7 @@ exports[`disabled should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c1.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
@@ -767,6 +815,11 @@ exports[`hintText should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -795,6 +848,11 @@ exports[`hintText should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -815,6 +873,11 @@ exports[`hintText should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -839,6 +902,11 @@ exports[`hintText should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -892,6 +960,7 @@ exports[`hintText should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c1.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
@@ -1045,6 +1114,11 @@ exports[`id should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1073,6 +1147,11 @@ exports[`id should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1093,6 +1172,11 @@ exports[`id should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -1146,6 +1230,7 @@ exports[`id should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c1.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
@@ -1292,6 +1377,11 @@ exports[`name should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1320,6 +1410,11 @@ exports[`name should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1340,6 +1435,11 @@ exports[`name should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -1393,6 +1493,7 @@ exports[`name should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c1.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
@@ -1540,6 +1641,11 @@ exports[`value should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1568,6 +1674,11 @@ exports[`value should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1588,6 +1699,11 @@ exports[`value should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -1641,6 +1757,7 @@ exports[`value should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c1.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
@@ -1787,6 +1904,11 @@ exports[`variant should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1815,6 +1937,11 @@ exports[`variant should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1835,6 +1962,11 @@ exports[`variant should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -1888,6 +2020,7 @@ exports[`variant should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c1.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
diff --git a/src/core/Form/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap b/src/core/Form/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
index a0534107d..20bf1fad6 100644
--- a/src/core/Form/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
+++ b/src/core/Form/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
@@ -25,6 +25,11 @@ exports[`default, with only required props should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -53,6 +58,11 @@ exports[`default, with only required props should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c5 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -73,6 +83,11 @@ exports[`default, with only required props should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c5::before,
+.c5::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -97,6 +112,11 @@ exports[`default, with only required props should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -191,6 +211,7 @@ exports[`default, with only required props should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c3.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
@@ -389,6 +410,11 @@ exports[`props className should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -417,6 +443,11 @@ exports[`props className should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c5 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -437,6 +468,11 @@ exports[`props className should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c5::before,
+.c5::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -461,6 +497,11 @@ exports[`props className should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -555,6 +596,7 @@ exports[`props className should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c3.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
@@ -753,6 +795,11 @@ exports[`props defaultValue should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -781,6 +828,11 @@ exports[`props defaultValue should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c5 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -801,6 +853,11 @@ exports[`props defaultValue should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c5::before,
+.c5::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -825,6 +882,11 @@ exports[`props defaultValue should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -919,6 +981,7 @@ exports[`props defaultValue should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c3.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
@@ -1118,6 +1181,11 @@ exports[`props hintText should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1146,6 +1214,11 @@ exports[`props hintText should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c5 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1166,6 +1239,11 @@ exports[`props hintText should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c5::before,
+.c5::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1190,6 +1268,11 @@ exports[`props hintText should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -1284,6 +1367,7 @@ exports[`props hintText should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c3.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
@@ -1488,6 +1572,11 @@ exports[`props id should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1516,6 +1605,11 @@ exports[`props id should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c5 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1536,6 +1630,11 @@ exports[`props id should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c5::before,
+.c5::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1560,6 +1659,11 @@ exports[`props id should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -1654,6 +1758,7 @@ exports[`props id should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c3.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
@@ -1852,6 +1957,11 @@ exports[`props label should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1880,6 +1990,11 @@ exports[`props label should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c5 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1900,6 +2015,11 @@ exports[`props label should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c5::before,
+.c5::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1924,6 +2044,11 @@ exports[`props label should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -2018,6 +2143,7 @@ exports[`props label should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c3.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
@@ -2216,6 +2342,11 @@ exports[`props labelMode should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c5 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -2244,6 +2375,11 @@ exports[`props labelMode should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c5::before,
+.c5::after {
+  box-sizing: border-box;
+}
+
 .c6 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -2264,6 +2400,11 @@ exports[`props labelMode should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c6::before,
+.c6::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -2288,6 +2429,11 @@ exports[`props labelMode should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   position: absolute;
   -webkit-clip: rect(0 0 0 0);
@@ -2394,6 +2540,7 @@ exports[`props labelMode should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c4.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
@@ -2592,6 +2739,11 @@ exports[`props name should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -2620,6 +2772,11 @@ exports[`props name should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c5 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -2640,6 +2797,11 @@ exports[`props name should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c5::before,
+.c5::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -2664,6 +2826,11 @@ exports[`props name should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -2758,6 +2925,7 @@ exports[`props name should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c3.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
@@ -2956,6 +3124,11 @@ exports[`props value should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -2984,6 +3157,11 @@ exports[`props value should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c5 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -3004,6 +3182,11 @@ exports[`props value should match snapshot 1`] = `
   max-width: 100%;
 }
 
+.c5::before,
+.c5::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -3028,6 +3211,11 @@ exports[`props value should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -3122,6 +3310,7 @@ exports[`props value should match snapshot 1`] = `
   border-radius: 50%;
   border: 1px solid hsl(201,7%,58%);
   background: transparent;
+  box-sizing: content-box;
 }
 
 .c3.fi-radio-button .fi-radio-button_input + .fi-radio-button_label::after {
diff --git a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap
index 8488f70db..9ad29692a 100644
--- a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap
+++ b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap
@@ -49,6 +49,11 @@ exports[`snapshot should have matching default structure 1`] = `
   height: auto;
 }
 
+.c5::before,
+.c5::after {
+  box-sizing: border-box;
+}
+
 .c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -73,6 +78,11 @@ exports[`snapshot should have matching default structure 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -101,6 +111,11 @@ exports[`snapshot should have matching default structure 1`] = `
   opacity: 0.54;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -125,6 +140,11 @@ exports[`snapshot should have matching default structure 1`] = `
   white-space: normal;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c6 {
   position: absolute;
   -webkit-clip: rect(0 0 0 0);
diff --git a/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap b/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap
index 34a88dae8..a97659c17 100644
--- a/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap
+++ b/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap
@@ -25,6 +25,11 @@ exports[`snapshots match error status with statustext 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -53,6 +58,11 @@ exports[`snapshots match error status with statustext 1`] = `
   opacity: 0.54;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -77,6 +87,11 @@ exports[`snapshots match error status with statustext 1`] = `
   white-space: normal;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c2.fi-label-text .fi-label-text_label-span {
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -338,6 +353,11 @@ exports[`snapshots match hidden label with placeholder 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c5 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -366,6 +386,11 @@ exports[`snapshots match hidden label with placeholder 1`] = `
   opacity: 0.54;
 }
 
+.c5::before,
+.c5::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -390,6 +415,11 @@ exports[`snapshots match hidden label with placeholder 1`] = `
   white-space: normal;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   position: absolute;
   -webkit-clip: rect(0 0 0 0);
@@ -632,6 +662,11 @@ exports[`snapshots match minimal implementation 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -660,6 +695,11 @@ exports[`snapshots match minimal implementation 1`] = `
   opacity: 0.54;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -684,6 +724,11 @@ exports[`snapshots match minimal implementation 1`] = `
   white-space: normal;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c2.fi-label-text .fi-label-text_label-span {
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
diff --git a/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap b/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap
index 38d01171a..1352d34a0 100644
--- a/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap
+++ b/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap
@@ -25,6 +25,11 @@ exports[`snapshot default structure should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -49,6 +54,11 @@ exports[`snapshot default structure should match snapshot 1`] = `
   white-space: normal;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -77,6 +87,11 @@ exports[`snapshot default structure should match snapshot 1`] = `
   opacity: 0.54;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c2.fi-label-text .fi-label-text_label-span {
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
diff --git a/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap b/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap
index cd8bb2328..c014a2bad 100644
--- a/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap
+++ b/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap
@@ -49,6 +49,11 @@ exports[`Toggle variant default:  calling render with the same component on the
   height: auto;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -73,6 +78,11 @@ exports[`Toggle variant default:  calling render with the same component on the
   white-space: normal;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c1.fi-toggle--disabled {
   cursor: not-allowed;
 }
@@ -528,6 +538,11 @@ exports[`Toggle variant withInput:  calling render with the same component on th
   opacity: 0.54;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -548,6 +563,11 @@ exports[`Toggle variant withInput:  calling render with the same component on th
   max-width: 100%;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -572,6 +592,11 @@ exports[`Toggle variant withInput:  calling render with the same component on th
   white-space: normal;
 }
 
+.c4::before,
+.c4::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   cursor: pointer;
 }
diff --git a/src/core/Heading/__snapshots__/Heading.test.tsx.snap b/src/core/Heading/__snapshots__/Heading.test.tsx.snap
index 27c787771..a077c6a45 100644
--- a/src/core/Heading/__snapshots__/Heading.test.tsx.snap
+++ b/src/core/Heading/__snapshots__/Heading.test.tsx.snap
@@ -25,6 +25,11 @@ exports[`calling render with the same component on the same container does not r
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
diff --git a/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap b/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
index 12c9219e3..08337b20e 100644
--- a/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
+++ b/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
@@ -25,6 +25,11 @@ exports[`calling render with the same component on the same container does not r
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c2 {
   display: inline-block;
   vertical-align: baseline;
diff --git a/src/core/Link/Link.baseStyles.ts b/src/core/Link/Link.baseStyles.ts
index c7576aab6..81c057471 100644
--- a/src/core/Link/Link.baseStyles.ts
+++ b/src/core/Link/Link.baseStyles.ts
@@ -35,7 +35,8 @@ export const externalStyles = withSuomifiTheme(
   ({ theme }: TokensAndTheme) => css`
     & .fi-link_icon {
       padding-left: ${theme.spacing.insetXs};
-      transform: translateY(0.1em);
+      font-size: 16px;
+      box-sizing: content-box;
     }
   `,
 );
diff --git a/src/core/Link/__snapshots__/Link.test.tsx.snap b/src/core/Link/__snapshots__/Link.test.tsx.snap
index 4bb78bf72..1e8ba2aa0 100644
--- a/src/core/Link/__snapshots__/Link.test.tsx.snap
+++ b/src/core/Link/__snapshots__/Link.test.tsx.snap
@@ -24,6 +24,11 @@ exports[`calling render with the same component on the same container does not r
   text-decoration: underline;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c0:hover,
 .c0:active,
 .c0:focus,
diff --git a/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap b/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap
index 38a8cd8f5..3ba24d9fb 100644
--- a/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap
+++ b/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap
@@ -24,6 +24,11 @@ exports[`calling render with the same component on the same container does not r
   text-decoration: underline;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c0:hover,
 .c0:active,
 .c0:focus,
@@ -58,6 +63,11 @@ exports[`calling render with the same component on the same container does not r
   white-space: normal;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c5 {
   display: inline-block;
   vertical-align: baseline;
@@ -77,9 +87,8 @@ exports[`calling render with the same component on the same container does not r
 
 .c2 .fi-link_icon {
   padding-left: 4px;
-  -webkit-transform: translateY(0.1em);
-  -ms-transform: translateY(0.1em);
-  transform: translateY(0.1em);
+  font-size: 16px;
+  box-sizing: content-box;
 }
 
 .c1 {
diff --git a/src/core/Paragraph/__snapshots__/Paragraph.test.tsx.snap b/src/core/Paragraph/__snapshots__/Paragraph.test.tsx.snap
index e04bd5740..9b8b68b9f 100644
--- a/src/core/Paragraph/__snapshots__/Paragraph.test.tsx.snap
+++ b/src/core/Paragraph/__snapshots__/Paragraph.test.tsx.snap
@@ -25,6 +25,11 @@ exports[`calling render with the same component on the same container does not r
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
diff --git a/src/core/Text/__snapshots__/Text.test.tsx.snap b/src/core/Text/__snapshots__/Text.test.tsx.snap
index 1d5da7625..1ae2dfdab 100644
--- a/src/core/Text/__snapshots__/Text.test.tsx.snap
+++ b/src/core/Text/__snapshots__/Text.test.tsx.snap
@@ -25,6 +25,11 @@ exports[`calling render with the same component on the same container does not r
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c1 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -93,6 +98,11 @@ exports[`calling render with the same component on the same container does not r
   white-space: normal;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c4 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
diff --git a/src/core/theme/__snapshots__/tokens.test.tsx.snap b/src/core/theme/__snapshots__/tokens.test.tsx.snap
index 1bafc1c0f..d1226fd86 100644
--- a/src/core/theme/__snapshots__/tokens.test.tsx.snap
+++ b/src/core/theme/__snapshots__/tokens.test.tsx.snap
@@ -49,6 +49,11 @@ exports[`snapshot testing 1`] = `
   height: auto;
 }
 
+.c2::before,
+.c2::after {
+  box-sizing: border-box;
+}
+
 .c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -73,6 +78,11 @@ exports[`snapshot testing 1`] = `
   white-space: normal;
 }
 
+.c0::before,
+.c0::after {
+  box-sizing: border-box;
+}
+
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -97,6 +107,11 @@ exports[`snapshot testing 1`] = `
   white-space: normal;
 }
 
+.c3::before,
+.c3::after {
+  box-sizing: border-box;
+}
+
 .c7 {
   display: inline-block;
   vertical-align: baseline;
diff --git a/src/reset/utils/index.ts b/src/reset/utils/index.ts
index efac43d76..7ff7b6290 100644
--- a/src/reset/utils/index.ts
+++ b/src/reset/utils/index.ts
@@ -16,6 +16,11 @@ const common = css`
   color: inherit;
   background: none;
   cursor: inherit;
+
+  ::before,
+  ::after {
+    box-sizing: border-box;
+  }
 `;
 
 const resets = {