diff --git a/core/src/components/radio/radio.ios.scss b/core/src/components/radio/radio.ios.scss
index a6c6a77074..d82d02d91d 100644
--- a/core/src/components/radio/radio.ios.scss
+++ b/core/src/components/radio/radio.ios.scss
@@ -21,7 +21,7 @@
 // iOS Radio Checkmark: Checked
 // -----------------------------------------
 
-.radio-ios .radio-checked .radio-inner {
+.radio-ios.radio-checked .radio-inner {
   @include position(4px, null, null, 7px);
 
   position: absolute;
@@ -108,11 +108,11 @@
     color: $color-base;
   }
 
-  .radio-ios-#{$color-name} .radio-checked {
+  .radio-ios-#{$color-name}.radio-checked {
     color: $color-base;
   }
 
-  .radio-ios-#{$color-name} .radio-checked  .radio-inner {
+  .radio-ios-#{$color-name}.radio-checked .radio-inner {
     border-color: $color-base;
   }
 }
diff --git a/core/src/components/radio/radio.md.scss b/core/src/components/radio/radio.md.scss
index a459ab831c..6fd690fa4c 100644
--- a/core/src/components/radio/radio.md.scss
+++ b/core/src/components/radio/radio.md.scss
@@ -47,7 +47,7 @@
 // Material Design Radio Outer Circle: Checked
 // -----------------------------------------
 
-.radio-md .radio-checked {
+.radio-md.radio-checked .radio-icon {
   border-color: $radio-md-color-on;
 }
 
@@ -55,7 +55,7 @@
 // Material Design Radio Inner Circle: Checked
 // -----------------------------------------
 
-.radio-md .radio-checked .radio-inner {
+.radio-md.radio-checked .radio-inner {
   transform: scale3d(1, 1, 1);
 }
 
@@ -130,7 +130,7 @@
     color: $color-base;
   }
 
-  .radio-md-#{$color-name} .radio-checked {
+  .radio-md-#{$color-name}.radio-checked .radio-icon {
     border-color: $color-base;
   }
 
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index f3ebd205f9..68e758c547 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -1,5 +1,5 @@
 import { Component, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
-import { CheckedInputChangeEvent, CssClassMap, Mode, RadioButtonInput, StyleEvent } from '../../interface';
+import { CheckedInputChangeEvent, Mode, RadioButtonInput, StyleEvent } from '../../interface';
 import { deferEvent } from '../../utils/helpers';
 import { createThemedClasses } from '../../utils/theme';
 
@@ -182,12 +182,8 @@ export class Radio implements RadioButtonInput {
   }
 
   render() {
-    const radioClasses: CssClassMap = {
-      'radio-icon': true,
-      'radio-checked': this.checked
-    };
     return [
-      <div class={radioClasses}>
+      <div class="radio-icon">
         <div class="radio-inner"/>
       </div>,
       <input