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 Decoder
HTML Beautifier
CSS Minifier
Box Shadow Generator
Add Page Numbers To PDF
Cron Expression Generator
Rotate PDF
EXIF Remover
Markdown to Google Docs Converter
CSV to Markdown Table
JSON to .env Converter
YAML to XML Converter
JavaScript Minify Tool
Binary to Hex Converter
SVG Optimizer
JSON to JSON Schema
OpenAPI Viewer
Word to PDF Converter
PDF to Excel Converter
Base32 Encoder/Decoder