CSS Border Radius Generator
Drag sliders for each corner to shape rounded or organic borders, preview live, and copy the border-radius CSS — in your browser.
Top Left
Top Right
Bottom Right
Bottom Left
CSS Output
border-radius: 16px;
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.
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
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Why use CSS Border Radius Generator?
- Converts between HEX, RGB, HSL, HSV, and CMYK instantly
- Accessibility contrast checker built in
- Generates harmonious palette variations from a single colour
- Export-ready CSS variables and design tokens
Common use cases
- Pick brand colours that meet WCAG accessibility standards
- Generate a complementary palette from a logo colour
- Convert Figma HEX codes to CSS rgb() for developers
- Create a gradient from two brand colours
- Verify sufficient contrast for text on coloured backgrounds
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.
Color Picker & Converter
Pick a color and instantly convert between HEX, RGB, HSL, HSB, and CMYK. Generate tints, shades, and color palettes.
CSS Gradient Generator
Create beautiful CSS linear, radial, and conic gradients online. Get the CSS code instantly with a live preview.
Color Contrast Checker
Check color contrast ratio for WCAG AA and AAA accessibility compliance. See if your text and background colors meet accessibility standards.
Explore all Color & Design.