How It Works
The CSS border-radiusproperty rounds the corners of an element's outer border edge. In its simplest form, you pass a single value like border-radius: 8px and all four corners get the same rounding. The shorthand accepts up to four values in clockwise order: top-left, top-right, bottom-right, bottom-left.
The advanced 8-value syntax uses a slash to separate horizontal and vertical radii: border-radius: H1 H2 H3 H4 / V1 V2 V3 V4. When the horizontal and vertical radii differ, the corner becomes an elliptical arc instead of a circular one. This is how you create organic blob shapes, egg forms, and other asymmetric designs that can't be achieved with the standard syntax.
Standard vs Fancy Border Radius
| Feature | Standard (4-value) | Fancy (8-value) |
|---|---|---|
| Syntax | border-radius: TL TR BR BL; | border-radius: H1 H2 H3 H4 / V1 V2 V3 V4; |
| Corner shape | Circular arc | Elliptical arc |
| Values per corner | 1 (radius) | 2 (horizontal + vertical) |
| Best for | Buttons, cards, inputs | Blobs, organic shapes, decorative elements |
| Tailwind support | Built-in classes | Arbitrary values only |
| Browser support | All modern browsers | All modern browsers |
Border Radius Presets
| Preset | CSS Value | Visual Description | Use Case |
|---|---|---|---|
| Rounded | 8px | Subtle rounding on all corners | Cards, inputs, buttons |
| Pill | 50% | Fully rounded ends on rectangular elements | Tags, badges, pill buttons |
| Circle | 50% | Perfect circle on square elements | Avatars, icons, status dots |
| Blob | 40px 12px 40px 12px | Alternating sharp and rounded corners | Decorative backgrounds, creative layouts |
| None | 0 | Sharp 90-degree corners | Tables, full-width sections, resets |
FAQ
What's the 8-value border-radius syntax?
The 8-value syntax splits each corner's radius into a horizontal and vertical component, separated by a forward slash. For example, border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% creates an organic blob shape. The four values before the slash control horizontal rounding, and the four after control vertical rounding. When horizontal and vertical values differ for a corner, the result is an elliptical curve instead of a circular one. This is what makes fancy border-radius shapes possible.
How do I make a circle with border-radius?
Set border-radius: 50%on a square element (equal width and height). If the element is not square, 50% creates an ellipse instead. For a perfect circle, ensure the element's dimensions are identical. In Tailwind CSS, use the rounded-full class. If you need a circle from a rectangular element, consider using clip-path: circle() instead.
Does border-radius affect the click area?
Yes. When you apply border-radius, the clickable area (hit region) of the element follows the rounded shape, not the original rectangular bounding box. Clicks in the rounded-off corners will not register on the element. This matters for buttons and interactive elements with large border-radius values. The same applies to pointer-events and hover states.
What's the Tailwind CSS equivalent of border-radius?
Tailwind provides built-in utilities for common border-radius values: rounded-sm (2px), rounded (4px), rounded-md (6px), rounded-lg (8px), rounded-xl (12px), rounded-2xl (16px), rounded-3xl (24px), and rounded-full (50%). For per-corner control, use directional variants like rounded-tl-lg. For arbitrary values, use the bracket syntax: rounded-[20px]. The 8-value fancy syntax has no Tailwind class and requires an inline style or custom CSS.
Try the Glassmorphism Generator to create frosted-glass effects, the Text Shadow Generator for typography effects, or the CSS Unit Converter to convert between px, rem, em, and other CSS units.