CSS Border Radius Generator
Move beyond four matching rounded corners with independent and elliptical radii expressed as compact valid CSS.
Border-radius controls
Unit
Presets
Live Preview
Preview appearance
Generated CSS
border-radius: 24px;How to use CSS Border Radius Generator
- 1
Select Uniform, Individual or Elliptical according to the corner control you need.
- 2
Choose px or % and adjust values with the sliders or their exact numeric inputs.
- 3
Use Link all corners where available, or start from Square, Rounded, Pill, Circle, Leaf or Blob.
- 4
Change the preview background, box and text colors to judge the silhouette in context.
- 5
Review the optimized shorthand under Generated CSS and click Copy CSS.
Frequently asked questions
About CSS Border Radius Generator
Border radius is often introduced as one number, yet CSS can describe four independent corners and separate horizontal and vertical curves. This generator exposes those layers through Uniform, Individual and Elliptical modes while maintaining a readable live preview.
Presets demonstrate more than ordinary rounded rectangles: Pill and Circle show percentage-based geometry, while Leaf and Blob illustrate asymmetric or elliptical combinations. Unit conversion and optional linked controls speed up exploration without removing access to exact values.
The final declaration is normalized into the shortest equivalent shorthand. Editor colors remain preview-only, so copied code stays narrowly focused on the corner geometry being designed.