Color Tools
CSS Border-Radius Generator
Visually create CSS border-radius values for all four corners independently. Preview the rounded shape and copy the CSS.
.element {
border-radius: 16px;
}CSS border-radius syntax
The border-radius property rounds the corners of an element. It accepts 1–4 values
controlling the four corners, and an optional second group of values after a slash (/) for elliptical corners.
| Syntax | Effect |
|---|---|
border-radius: 8px | All four corners: 8px |
border-radius: 8px 16px | Top-left/bottom-right: 8px; top-right/bottom-left: 16px |
border-radius: 50% | Circle (on a square element) |
border-radius: 0 0 16px 16px | Only bottom corners rounded |
border-radius: 50% / 30% | Elliptical corners (wider than tall) |
Organic/blob-like shapes use independent values per corner, e.g.:
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%.
Common shapes and design patterns
| Pattern | border-radius value | Typical use |
|---|---|---|
| Sharp corners | 0 | Tables, technical UIs |
| Subtle rounding | 4px | Input fields, default buttons |
| Card corners | 8–16px | Content cards, modals |
| Pill button | 9999px or 50vh | Tags, CTA buttons, badges |
| Circle avatar | 50% | Profile photos on square containers |
| Squircle (approx.) | 25–30% | App icons, iOS-style rounded squares |
CSS logical properties
CSS now offers logical border-radius properties for internationalized layouts and vertical writing modes. Instead of physical corners (top-left, top-right, etc.) they use flow-relative directions:
border-start-start-radius- top-left in LTR horizontal writingborder-start-end-radius- top-right in LTR horizontal writingborder-end-start-radius- bottom-left in LTR horizontal writingborder-end-end-radius- bottom-right in LTR horizontal writing
These properties automatically flip in right-to-left (dir="rtl") layouts and
rotate correctly for vertical writing modes (common in CJK typography). Use logical properties
in any component that might be used in a multilingual or RTL interface.