CSS Border Radius Generator
Options
Live preview
What is CSS Border Radius Generator?
This tool helps you generate CSS border-radius values for rounded corners.
It is useful for buttons, cards, inputs, modals, avatars, and modern UI components.
How to use CSS Border Radius Generator
- Adjust the corner radius values using the inputs or sliders.
- Keep all corners linked or edit each corner separately.
- Copy the generated border-radius value or full CSS rule.
- Paste an existing border-radius value to parse and edit it.
Tips
- Use one value for evenly rounded corners.
- Use four values for more organic or asymmetric shapes.
- Rounded corners often pair well with box shadows and gradients.
- Large border-radius values are useful for pills and capsules.
Border radius checks before applying rounded geometry
Corner radii are constrained by element dimensions and interact with borders, overflow, images, focus indicators, and nested surfaces.
Test changing dimensions
Check short, tall, narrow, fluid, and content-driven elements because percentage and large radii resolve differently as the box changes.
Review elliptical corners
Verify horizontal and vertical radii, slash syntax, asymmetric corners, and browser normalization when combined values exceed the box.
Coordinate nested surfaces
Align parent and child radii with padding and border width so backgrounds, images, cards, and inner panels do not leave uneven gaps.
Preserve focus visibility
Test outlines, shadows, overflow clipping, forced colors, and interactive states around rounded controls and containers.
Related tools
You may also find these tools useful.