CSS Border Radius Generator

The CSS Border Radius Generator creates rounded corners from simple uniform radius to complex blob shapes. Individual corner control (border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius) lets you make asymmetric shapes — rounded-top tabs, chat bubbles with pointed corner, CSS tooltips. Elliptical radii (two values per corner: 30px 60px) enable organic blob shapes that are nearly impossible to write by hand but look great for hero backgrounds and decorative elements. Preview live on a sample element; copy the generated CSS including shorthand formats.

Border radius is one of the most common CSS properties — but doing more than uniform rounded corners requires understanding the syntax, which is surprisingly confusing. The shorthand border-radius: 30px 60px 20px 10px / 10px 20px 30px 40px specifies different x and y radii for each corner. This tool makes all that visual: drag sliders for each corner, see the shape morph in real time, generate clean CSS.

CSS border-radius syntax:

Shorthand (1 value = all corners):
``css
border-radius: 10px;
``

Shorthand (4 values = each corner, clockwise from top-left):
``css
border-radius: 10px 20px 30px 40px;
/* top-left, top-right, bottom-right, bottom-left */
``

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

Elliptical radii (2 values per corner):

```css
border-radius: 30px 60px / 10px 20px;
/* x-radius / y-radius for all corners */

border-radius: 30px 60px 10px 20px / 5px 10px 15px 20px;
/* each corner: x-radius on top, y-radius on bottom */
```

Common patterns:

Pill button (fully rounded ends):
``css
border-radius: 9999px; /* or 50% for circular based on aspect ratio */
``

Circle (from square):
``css
border-radius: 50%;
/* must be square element for perfect circle */
``

Squircle (iOS-style rounded square):
``css
/* Approximation with CSS — true squircle needs SVG or shader */
border-radius: 22%; /* not perfect but close */
``

Chat bubble:
``css
border-radius: 18px 18px 18px 4px; /* bottom-left is the pointer */
``

Rounded tab:
``css
border-radius: 8px 8px 0 0; /* top corners rounded */
``

Blob shape (organic):
``css
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
``

Percentage vs pixel:

- Pixels (10px, 16px): fixed regardless of element size. Precise, consistent.
- Percentages (50%, 25%): relative to element dimensions. Creates circles and ovals from non-square elements.
- Rem/em (1rem, 0.5em): scale with font size. Good for inherit-like behavior.

Common pixel values:

- 2-4px: subtle rounding (inputs, small buttons)
- 6-8px: gentle rounding (default buttons)
- 12-16px: more rounded (cards, modals)
- 20-32px: strongly rounded (modern UI)
- 50% / 9999px: circles and pills

Design system scales:

Tailwind CSS example scale:
- rounded-none: 0
- rounded-sm: 0.125rem (2px)
- rounded: 0.25rem (4px)
- rounded-md: 0.375rem (6px)
- rounded-lg: 0.5rem (8px)
- rounded-xl: 0.75rem (12px)
- rounded-2xl: 1rem (16px)
- rounded-3xl: 1.5rem (24px)
- rounded-full: 9999px

Gotchas:

- Images with border-radius: Set overflow: hidden or use border-radius on an <img> directly.
- Button backgrounds extending past border: Use overflow: hidden on the button.
- Outline does not follow border-radius: By design. Use box-shadow: 0 0 0 3px color for rounded focus.
- Nested borders: Inner element border-radius should be smaller than parent to look right (parent 12px, inner 8px).

border-radius vs clip-path: border-radius is for uniform corner rounding. clip-path cuts any shape (polygons, curves, inset). Use border-radius for rounded corners; clip-path for complex shapes.

Percentage vs pixel radius: Pixels are fixed (responsive uses different breakpoints). Percentages are relative to element size (natural scaling). 50% on square creates circle. Use pixels for design system consistency, percentages for shapes dependent on element size.

border-radius vs mask-image: mask-image is more powerful for shaped masking (gradients, SVG shapes). border-radius is simpler for standard rounding. For 90% of cases, border-radius is sufficient.

9999px vs 50% for pills: 9999px guarantees fully rounded regardless of element height. 50% only works if height is known/constrained. For pill buttons on variable-height content, prefer 9999px.

Blob shapes via CSS vs SVG: CSS border-radius with elliptical values produces organic-looking blobs cheaply. True blob shapes (with inner curves, multiple nodes) require SVG. CSS blobs are good enough for most decorative uses.

Squircle approximation: True squircle (iOS app icon shape) is a super-ellipse — not perfectly expressible in CSS. border-radius: 22% approximates. For pixel-perfect squircles, use SVG or a mask.