CSS Border Radius Generator — Rounded Corners Made Easy

Rounded corners are everywhere in modern web design — from buttons and cards to avatars and modals. CSS border-radius is simple for basic cases, but when you want asymmetric corners, elliptical radii, or complex organic shapes, the syntax quickly becomes confusing.

Our free CSS Border Radius Generator lets you drag sliders to adjust each corner independently, see the live preview, and copy the finished CSS code with one click.

The CSS border-radius Property

At its simplest, border-radius accepts one value and applies it to all four corners:

`css border-radius: 8px; / all corners rounded 8px / border-radius: 50%; / circle (on a square element) / border-radius: 9999px; / pill shape / `

Controlling Each Corner Independently

You can specify up to four values, applying to corners in clockwise order starting from the top-left:

`css border-radius: 10px 20px 30px 40px; / top-left | top-right | bottom-right | bottom-left / `

Shorthand Pairs

Two values apply to opposite corners:

`css border-radius: 10px 30px; / top-left & bottom-right | top-right & bottom-left / `

Three values:

`css border-radius: 10px 20px 30px; / top-left | top-right & bottom-left | bottom-right / `

Elliptical Corners (The Slash Syntax)

The slash syntax lets you set horizontal and vertical radii independently, creating elliptical (egg-shaped) corners:

`css border-radius: 50px / 20px; / horizontal-radius / vertical-radius — applied to all corners / `

Full control:

`css border-radius: 40px 20px 30px 10px / 20px 40px 10px 30px; `

This is where things get complex — and where the generator saves significant time.

Common Border Radius Patterns

Perfect Circle

`css border-radius: 50%; ` Apply to a square element (equal width and height).

Pill / Capsule Shape

`css border-radius: 9999px; ` Works on any element regardless of size — the radius gets capped at half the smaller dimension.

Rounded Card

`css border-radius: 12px; ` Subtle, modern card style widely used in design systems like Material Design and Apple's HIG.

Squircle Effect (Organic Shape)

`css border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; ` Produces an irregular "blob" shape — popular for avatar backgrounds and decorative elements.

Top Rounded Only (Modal / Sheet)

`css border-radius: 16px 16px 0 0; ` For bottom sheets, modals with flat bottoms, or sticky headers.

Button with Single Corner Emphasis

`css border-radius: 4px 16px 4px 4px; ` One exaggerated corner for asymmetric design accents.

How to Use the Border Radius Generator

The Border Radius Generator on cleverly.tools makes visual experimentation fast:

1. Adjust each corner — four independent sliders for top-left, top-right, bottom-right, bottom-left 2. Toggle elliptical mode — unlock separate horizontal and vertical radii per corner for advanced shapes 3. See the live preview — the shape updates instantly as you drag 4. Switch units — px, %, or rem 5. Copy the CSS — the ready-to-use border-radius value copies to your clipboard

Use it to match a design from Figma, experiment with shapes, or generate complex organic blob backgrounds.

Border Radius in Modern UI Design

Why Rounded Corners Feel Friendly

Research in interface design consistently shows that sharp corners are perceived as more aggressive and angular, while rounded corners feel approachable and safe. This is why consumer-facing products (social apps, fintech, consumer SaaS) typically use more rounded corners than enterprise tools.

Design System Tokens

Most mature design systems define border-radius as tokens:

`css --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; `

Using tokens ensures consistency and makes global updates (e.g., switching to a more rounded feel) require changing one variable, not hundreds of selectors.

Tailwind CSS

Tailwind ships with radius utilities like rounded, rounded-lg, rounded-2xl, and rounded-full that map to these conventions. If you use Tailwind, you often do not need custom border-radius values at all.

---

FAQ

How do I make a circle with CSS border-radius?

Apply border-radius: 50% to an element that has equal width and height (a square). The 50% radius in each direction creates a perfect circle.

What is the difference between border-radius with px and %?

Pixel values define an absolute radius size. Percentage values are relative to the element's dimensions — 50% on a 100×100px element gives a 50px radius. Percentages are useful for responsive designs because the radius scales with the element.

Can I generate CSS blob shapes with this tool?

Yes. By enabling elliptical mode and setting different horizontal and vertical radii per corner, you can create organic blob shapes. The Border Radius Generator previews these shapes live so you can experiment until it looks right.

Does border-radius work on images?

Yes. Applying border-radius to an element rounds its visual corners. Combined with overflow: hidden on a parent container, you can also clip images to any custom shape.