How to use CSS Border Radius Generator
Generate CSS border-radius declarations visually — control all four corners independently with sliders, and optionally split each corner into independent horizontal and vertical radii to create organic blob shapes. The live preview updates instantly. Copy the finished border-radius CSS declaration and paste it directly into your stylesheet.
- Use the "All Corners" uniform slider to set the same radius on every corner at once.
- Adjust individual corner sliders (Top Left, Top Right, Bottom Right, Bottom Left) for asymmetric shapes.
- Enable "Split horizontal / vertical radii" to unlock independent horizontal and vertical radius per corner.
- Drag both H and V sliders for each corner to create organic blob or ellipse shapes.
- Watch the live preview update with each change.
- Copy the generated CSS output and paste it into your stylesheet.
Your data never leaves your device — 100% private processing.
How CSS border-radius works
The border-radius shorthand sets rounded corners on an element. With a single value (border-radius: 8px) all four corners receive the same radius. With four values (border-radius: tl tr br bl) each corner is set independently. With the slash notation (border-radius: h1 h2 h3 h4 / v1 v2 v3 v4) each corner gets an independent horizontal and vertical radius, enabling elliptic corners and complex organic shapes. A radius of 50% on a square element produces a perfect circle; values above 50% on non-square elements can create pill and blob shapes.
| Syntax | Example | Result |
|---|---|---|
| Single value | border-radius: 8px | All corners equal |
| Two values | border-radius: 8px 0 | TL/BR=8px, TR/BL=0 |
| Four values | border-radius: 10px 20px 30px 40px | Each corner set |
| Slash notation | border-radius: 50px 30px / 30px 50px | Independent H and V radii |
| 50% | border-radius: 50% | Circle (on a square element) |
Blob shapes and organic design
Blob shapes — highly asymmetric curved forms — are created by setting very different horizontal and vertical radii on each corner using the slash notation. For example, border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% produces a flowing organic shape popular in illustration-heavy landing pages and hero sections. Because blobs are defined purely in CSS, they are infinitely scalable, responsive to parent size, and render crisply at every resolution. Use blobs as decorative accent elements or as containers for profile photos and avatars.
Worked examples
Pill button
Inputs: all corners 9999px
Result: border-radius: 9999px
Organic blob
Inputs: slash notation, varied radii
Result: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%
Glossary
- Border radius
- A CSS property that rounds the corners of an element's outer border edge.
- Slash notation
- The border-radius / separator that divides horizontal radii from vertical radii, enabling elliptic corners.
- Elliptic corner
- A border-radius corner where the horizontal and vertical radii differ, producing an ellipse arc rather than a circular arc.
- Blob shape
- A highly asymmetric rounded shape created using the slash notation with large, varied radius values per corner.
Related reading
Frequently Asked Questions
Why use CSS Border Radius Generator?
- Independent per-corner sliders enable asymmetric radius values without writing raw CSS fractions
- Slash notation mode unlocks elliptic corners and organic blob shapes through visual controls
- Live preview on a representative card element shows radius changes at a realistic UI scale
- Generates the minimal CSS shorthand rather than verbose four-value declarations where possible
Common use cases
- Setting different top and bottom radii on a card component to match a specific design mockup
- Creating a pill-shaped button by pushing a uniform radius to 50% with the uniform slider
- Building a decorative blob accent shape for a hero section without writing slash notation by hand
- Comparing 4px, 8px, and 12px radii on a modal container to settle on a design-system value
- Generating border-radius CSS for circular avatars that need independent H/V radii on non-square images
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Related Color & Design
CSS Box Shadow Generator
Design CSS box-shadows visually with a live preview and copy the code. Layer multiple shadows, set blur, spread, and color. Free and private.
Glassmorphism Generator
Generate frosted-glass (glassmorphism) CSS with backdrop blur, transparency, and border. Live preview and copy. Free and private.
PX ↔ REM Converter
Convert px to rem and rem to px for responsive CSS, with a configurable root font size. Includes a handy reference table. Free and private.
CSS Minifier & Beautifier
Minify and beautify CSS code online. Reduce CSS file size by removing whitespace and comments. Free online CSS minifier with instant results.
Code Beautifier & Formatter
Format and beautify code online with Prettier. Supports JavaScript, TypeScript, JSON, CSS, HTML, Markdown, YAML, and more. Free, private, runs in your browser.
Color Picker & Converter
Pick a color and convert HEX, RGB, HSL, HSB, and CMYK instantly. Generate tints, shades, and export-ready palette values.
Explore all Color & Design.