CSS Border Radius Generator
Visually build CSS border-radius
100% free. Runs entirely in your browser - your files and data never leave your device and nothing is uploaded to any server.
Corners
border-radius: 12px;Presets
About this tool
Visually adjust an element's corner rounding - each corner independently if needed - with live preview, then generates the exact CSS border-radius syntax to copy, including support for the more complex elliptical corner values that are easy to get wrong by hand.
How to use this tool
- Pick base radius styleStart with uniform radius or per-corner editing mode.
- Adjust each cornerTune top-left, top-right, bottom-right, and bottom-left independently.
- Test elliptical valuesUse advanced mode for organic or blob-like corner shapes.
- Copy CSS outputPaste final `border-radius` syntax into your stylesheet.
Border-radius shortcuts
border-radius: 12px rounds all four corners equally. Four values go clockwise from the top-left: 12px 12px 0 0 rounds only the top. A pill-shaped button uses a radius at least half its height, such as 9999px, and a circle uses 50% on a square element.
A slash sets different horizontal and vertical radii, which makes elliptical corners: border-radius: 50% / 30%.
Key features
- Accurate radius generation without memorizing complex shorthand.
- Visual feedback for per-corner and elliptical shapes.
- Speeds up component styling and experimentation.
- Produces valid CSS ready for production use.
Common uses
- Building button, card, and input corner systems.
- Creating custom shapes for modern UI layouts.
- Matching Figma corner specs in frontend code.
- Generating rounded avatars, pills, and badges quickly.
Tips for better results
- Keep radius values consistent inside a component family.
- Use smaller radii for dense UI and larger for playful design.
- Preview corners at real component size before finalizing.
- Document standard radius tokens for team-wide consistency.
Mistakes to avoid
- Using random per-corner values that break visual rhythm.
- Applying very large radii on small components causing clipping.
- Ignoring how radius interacts with shadows and borders.
- Hardcoding many unique radius values instead of tokens.
Frequently asked questions
Yes - independently adjusting all four corners is supported, not just a single uniform radius applied everywhere.
Yes - with large enough radius values (or elliptical corner values), you can create fully rounded/circular shapes or organic blob-like outlines.
border-radius is well-supported in all modern browsers without vendor prefixes, so the generated CSS should work consistently everywhere.
Set border-radius to a value at least half the element's height - 9999px is a common shortcut - and the ends become fully round however wide the button grows.
Values before the slash set horizontal radii and values after it set vertical radii, for example 50% / 30%. Different horizontal and vertical radii produce elliptical corners and organic blob shapes.
Child content can spill past rounded corners. Add overflow: hidden to the rounded container, or put the border-radius on the image itself.