Can users still use arrow keys?

Yes — arrow keys move between radios in the same group because they are native inputs.

How is the inner dot made?

An inset box-shadow in the background color creates the ring and dot without extra elements.

Can I copy the generated CSS?

Yes. Click Copy CSS to put the code on your clipboard, or Download CSS to save a .css file. You can also edit the code by hand before copying.

Is anything uploaded to a server?

No. The CSS is generated in your browser from the settings you choose. The tool keeps working offline once the page has loaded.

Can I share my design?

Yes. The page address updates as you change settings, so the Share button copies a link that restores your exact configuration.

CSS Radio Button Generator

Give radio buttons your brand style while keeping native keyboard support. Change size, border, checked color and inner dot.

Last updated: 2026-07-21 · Runs 100% in your browser

// controls

Size22px

Border width2px

Border color

Checked color

Dot size45%

Inner background

Live preview

Generated CSS

.radio {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #5a615d;
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.radio:checked {
  border-color: #00ff66;
  background: #00ff66;
  box-shadow: inset 0 0 0 5px #0b0f0c;
}

.radio:focus-visible {
  outline: 2px solid #00ff66;
  outline-offset: 2px;
}

// Example output

.radio {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #5a615d;
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.radio:checked {
  border-color: #00ff66;
  background: #00ff66;
  box-shadow: inset 0 0 0 5px #0b0f0c;
}

.radio:focus-visible {
  outline: 2px solid #00ff66;
  outline-offset: 2px;
}

// Features

▸appearance: none technique
▸Size and border width
▸Dot scale
▸Focus-visible style
▸Interactive preview group

// How to use

01Adjust the controls on the left or pick a preset to start the CSS Radio Button Generator.
02Watch the live preview update instantly as you change each setting.
03Fine-tune the generated CSS by hand in the code panel if you like.
04Click Copy CSS or Download CSS, or Share to send a link to your design.

// FAQ

Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.

Sponsored · Recommended developer deals

// Related tools

CSS Checkbox Generator

Style custom checkboxes with CSS appearance: none — size, colors, radius and checkmark, fully accessible.

CSS Toggle Switch Generator

Design accessible CSS toggle switches built on a real checkbox, with custom size, colors and speed.

CSS Input Generator

Design text inputs with custom borders, padding, radius, placeholder and focus ring — copy clean CSS.