Border Radius Generator
Create rounded corners and blob shapes with a live preview.
Want to create short URLs? Sign up for free to get started.
About Border Radius Generator
Generate border-radius values visually and copy them straight into your CSS. Use it for buttons, cards, images, avatars, and playful “blob” UI shapes.
How to use
- Pick a preset or adjust the corner sliders.
- Enable Elliptical to control X/Y radii separately.
- Copy the generated value (or a full CSS snippet).
CSS syntax tips
- 4 values:
border-radius: TL TR BR BL; - Elliptical:
border-radius: TLx TRx BRx BLx / TLy TRy BRy BLy; - Percent units scale with the element size and are great for fluid rounding.
Good use cases
- Designing buttons and cards that match a brand style.
- Creating avatar crops (try 50%).
- Making organic shapes for hero sections and backgrounds.
More CSS tools
Format, compress, and polish your styles.
CSS BeautifierCSS MinifierColor Palette GeneratorTo keep styling polished, pair this with Box Shadow Generator, CSS Gradient Generator, and Color Converter (HEX/RGB/HSL).
Related Tools
More tools you may find useful.
JWT Generator
JavaScript Beautifier
Password Strength Checker
Extract PDF Pages
PDF to Text Converter
CSV To JSON
JSON To CSV
EXIF Viewer
Glob ToolTest
Sign PDF
Markdown to HTML Converter
JSON to .env Converter
JSON to YAML Converter
YAML to XML Converter
XML Minifier
Decimal to Roman Converter
Roman to Decimal Converter
Unstringify JSON
JSON to JSON Schema
Word to PDF Converter