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
Anchor Tag Generator
CSS Gradient Generator
Webcam Tester
PDF Splitter
Rotate PDF
Glob ToolTest
CSV to Markdown Table
SQL to JSON Converter
JSON to Java Converter
Java to JSON Converter
YAML to JSON Converter
XML to YAML Converter
Decimal to Roman Converter
Binary to Decimal Converter
Decimal to Hex Converter
Hex to Decimal Converter
Convert JSON to Text
HAR File Analyzer
cURL Converter