diff --git a/src/material/radio/radio.scss b/src/material/radio/radio.scss index da6b0a088d7d..55d929f8c6de 100644 --- a/src/material/radio/radio.scss +++ b/src/material/radio/radio.scss @@ -61,6 +61,16 @@ $mat-radio-ripple-radius: 20px; ._mat-animation-noopable & { transition: none; } + + // Note that this creates a square box around the circle, however it's consistent with + // how IE/Edge treat native radio buttons in high contrast mode. We can't turn the border + // into a dotted one, because it's too thick which causes the circles to look off. + @include cdk-high-contrast { + .mat-radio-button.cdk-keyboard-focused & { + outline: dotted 1px; + } + } + } // The inner circle for the radio, shown when checked.