diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
index 2e6be339d862..66ba03b216eb 100644
--- a/src/lib/checkbox/checkbox.scss
+++ b/src/lib/checkbox/checkbox.scss
@@ -196,7 +196,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 }
 
 .mat-checkbox-layout {
-  // `cursor: inherit` ensures that the wrapper element gets the same cursor as the md-checkbox
+  // `cursor: inherit` ensures that the wrapper element gets the same cursor as the mat-checkbox
   // (e.g. pointer by default, regular when disabled), instead of the browser default.
   cursor: inherit;
   align-items: baseline;
@@ -234,8 +234,12 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   @extend %mat-checkbox-outer-box;
 
   background-color: transparent;
-  border: $mat-checkbox-border-width solid;
-  transition: border-color $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function;
+  transition:
+      border-color $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function;
+  border: {
+    width: $mat-checkbox-border-width;
+    style: solid;
+  }
 }
 
 .mat-checkbox-background {
diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss
index ab80c77cdb64..a1a1283a08b5 100644
--- a/src/lib/radio/radio.scss
+++ b/src/lib/radio/radio.scss
@@ -32,8 +32,6 @@ $mat-radio-ripple-size: $mat-radio-size * 0.75;
 
 // The outer circle for the radio, always present.
 .mat-radio-outer-circle {
-  border: solid 2px;
-  border-radius: 50%;
   box-sizing: border-box;
   height: $mat-radio-size;
   left: 0;
@@ -41,6 +39,11 @@ $mat-radio-ripple-size: $mat-radio-size * 0.75;
   top: 0;
   transition: border-color ease 280ms;
   width: $mat-radio-size;
+  border: {
+    width: 2px;
+    style: solid;
+    radius: 50%;
+  }
 }
 
 // The inner circle for the radio, shown when checked.