Published in


3 ways to style radio buttons with modern CSS

[type=radio]:checked::before { 
content: "";
width: 14px;
height: 14px;
background-color: #ffa500;
position: absolute;
top: 2px;
left: 2px;

Modern CSS to the rescue

The CodePen (link below)

Using accent-color

body { accent-color: red; }
  • Simple to use
  • Low stylability
  • Not fully supported

Using box-shadow

input { 
/* The native appearance is hidden */
appearance: none;
-webkit-appearance: none;

/* For a circular appearance we need a border-radius. */
border-radius: 50%;
/* The background will be the radio dot's color. */
background: #FF572233;
/* The border for spacing between the dot and the circle */ border: 3px solid #FFF; /* box-shadow with no offset and no blur => an outer circle */
box-shadow: 0 0 0 1px solid #FF5722; }
  • Full support
  • High stylability
  • Scales badly in some environments.

Using outline

input { 
appearance: none;
-webkit-appearance: none;
border-radius: 50%;
background: #e8e8e8;
border: 3px solid #FFF;
/* The outline will be the outer circle */
outline: 1px solid #999;
  • Scales better than box-shadow
  • High stylability
  • Does not affect layout
  • No Safari support.

Which one to choose?



Bryntum creates advanced Gantt project management UI components for web application development, as well as developer tools for testing and error monitoring.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mats Bryntse

Mats Bryntse


CEO @ Bryntum, passionate about all things web dev / JS / CSS.