← All Examples

Custom Radio Buttons

Styled radio buttons without any images or JavaScript.

Published May 19, 2026

Demo

HTML

<label class="radio-label">
  <input type="radio" name="group"> Option
</label>

CSS

.radio-label {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  cursor: pointer;
}

input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  position: relative;
  transition: border-color .2s;
}

input[type="radio"]:checked {
  border-color: #5b4cdb;
}

input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #5b4cdb;
  border-radius: 50%;
}

How it works

Same technique as custom checkboxes — appearance:none strips default styling. The ::after pseudo-element draws the inner dot and is centered with absolute positioning + translate. The dot only appears when :checked, which the browser manages natively.