CSS Radio Button Generator
Create beautiful, accessible custom radio buttons with CSS. Design radio buttons with multiple states, animations, and styles perfect for forms and surveys.
Quick Presets
Size
Basic Styles
Checked State
Preview
Radio buttons in a group (only one can be selected)
Generated CSS
/* HTML Structure */
<label class="radio-container">
<input type="radio" name="radio-group" class="custom-radio" />
<span class="radio-label">Option 1</span>
</label>
/* CSS Styles */
.radio-container {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
.custom-radio {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
border: 2px solid #d1d5db;
border-radius: 50%;
background: #ffffff;
transition: all 0.2s ease;
cursor: pointer;
position: relative;
flex-shrink: 0;
}
/* Checked State */
.custom-radio:checked {
background: #ffffff;
border-color: #3b82f6;
}
.custom-radio:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 60%;
background-color: #3b82f6;
border-radius: 50%;
}
/* Hover State */
.custom-radio:hover {
border-color: #2563eb;
background: #ffffff;
transform: scale(1.05);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* Focus State */
.custom-radio:focus {
outline: 2px solid #93c5fd;
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
/* Disabled State */
.custom-radio:disabled {
opacity: 0.5;
background: #f3f4f6;
border-color: #d1d5db;
cursor: not-allowed;
}
.radio-container:has(.custom-radio:disabled) {
cursor: not-allowed;
opacity: 0.5;
}
/* Label */
.radio-label {
font-size: 14px;
color: #374151;
}
/* Accessibility: Reduce motion */
@media (prefers-reduced-motion: reduce) {
.custom-radio {
transition: none;
}
}Recommended Settings
Radio Button Best Practices
- •Use radio buttons when user must select exactly one option from a list
- •Always include a label for each radio button (accessibility)
- •Group related radio buttons with the same 'name' attribute
- •Provide a default selected option when possible
- •Keep option labels concise (under 10 words)
Accessibility Guidelines
- •Ensure color contrast meets WCAG AA standards (4.5:1 minimum)
- •Include visible focus indicators for keyboard navigation
- •Use semantic HTML with proper label associations
- •Test with screen readers (NVDA, JAWS, VoiceOver)
- •Support prefers-reduced-motion for animations
Pro Tips
- •Radio buttons are circular to distinguish from square checkboxes
- •Use 'checked' attribute or JavaScript to set default selection
- •Consider using vertical layout for 5+ options for better scannability
- •Add hover states to improve interactivity feedback
Most Popular
20px size, circular (50% border-radius), blue accent color
When to Use This Tool
Perfect for surveys, quizzes, and forms where users must select exactly one answer from multiple options.
Recommended: Default Modern or iOS Native preset
Use in settings panels where users choose between mutually exclusive options like theme selection or notification preferences.
Recommended: Material Design or Minimal Outline preset
Display payment methods or shipping choices where only one can be active at a time in checkout flows.
Recommended: Bold Colorful or Gradient Fill preset
Allow users to filter content by selecting one category, time period, or sort option from a predefined list.
Recommended: Ring/Donut Style or Minimal Outline preset
Present binary choices (Yes/No, Agree/Disagree) or multiple consent levels where only one applies.
Recommended: Accessible High Contrast or Default Modern preset
How It Works
Select a preset style or start with Default Modern
Choose your preferred size (small, medium, large, or custom)
Customize basic styles: border width, radius, and colors
Configure the checked state: background, border, and dot appearance
Select dot style: solid dot, ring/donut, or checkmark (creative)
Expand Advanced Settings to customize hover, focus, and disabled states
Preview different states using the tabs (unchecked, checked, hover, focus, disabled)
Review the live preview showing a radio button group
Copy the generated CSS or download as a .css file
Paste into your project and adjust the HTML structure as needed
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Pure JavaScript for optimal performance on modern browsers.
Secure
No data collection, no tracking, no sign-up required.
Frequently Asked Questions
When should I use radio buttons vs checkboxes?
Use radio buttons when users must select EXACTLY ONE option from a list (mutually exclusive). Use checkboxes when users can select ZERO, ONE, or MULTIPLE options. For example: gender selection uses radio buttons, while interests selection uses checkboxes.
How do I group radio buttons together?
Use the same 'name' attribute for all radio buttons in a group. This ensures only one can be selected at a time. Example: <input type='radio' name='payment-method' value='card'> and <input type='radio' name='payment-method' value='paypal'> are grouped.
Why use 50% border-radius for radio buttons?
50% border-radius creates a perfect circle, which is the standard shape for radio buttons. This visual distinction helps users instantly recognize them as radio buttons (vs. square checkboxes). However, you can customize this for creative designs.
What's the difference between dot, ring, and checkmark styles?
Dot style shows a solid filled circle when selected (most common). Ring/donut style shows a hollow ring outline (minimalist). Checkmark style uses a checkmark instead of a dot (creative variation, less standard but unique).
How do I make radio buttons accessible?
1) Always associate labels with <label for='id'> or wrap radio in <label>. 2) Ensure sufficient color contrast (4.5:1 ratio). 3) Provide visible focus indicators. 4) Test keyboard navigation (Tab, Arrow keys). 5) Include @media (prefers-reduced-motion: reduce) to disable animations.
Can I have no radio button selected by default?
Yes, but it's not recommended for good UX. If no option is selected by default, users might miss the question entirely. Best practice: provide a 'None' or 'Prefer not to say' option as the default selection for optional questions.