Border Radius Preview
Generated CSS
The border-radius property rounds the corners of an HTML element's border box. It is one of the most widely used CSS properties — from subtle 4px card corners to full pill buttons and organic blob shapes. This generator lets you visually control all four corners, switch between px and % units, and build elliptical shapes using the advanced / syntax. Copy the result as clean, production-ready CSS instantly.
Whether you are building a design system, styling a button, or creating a unique UI shape, this tool removes the guesswork and shows you the result in real time across different element shapes and background colours.
/ syntax for oval shapes.The shorthand property follows the same clockwise order as margin and padding — top-left, top-right, bottom-right, bottom-left. The browser collapses the value automatically when corners match, so you rarely need to write all four.
/* One value — all four corners equal */ border-radius: 16px; /* Two values — top-left+bottom-right / top-right+bottom-left */ border-radius: 16px 8px; /* Three values — top-left / top-right+bottom-left / bottom-right */ border-radius: 16px 8px 4px; /* Four values — TL TR BR BL (clockwise from top-left) */ border-radius: 8px 16px 24px 4px;
Each corner can be set individually using longhand properties. These are useful when you want to override a single corner within a component without touching the others, or when building design tokens.
border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; /* Same as: border-radius: 16px 16px 0 0; (tab shape) */
A slash separates horizontal radii from vertical radii, allowing each corner to be an ellipse rather than a circle. Values before the slash set the horizontal radius of each corner; values after set the vertical radius. This unlocks a much wider range of organic shapes.
/* Perfect circle on a square element */ border-radius: 50%; /* Ellipse — flatter horizontally */ border-radius: 50% / 25%; /* Organic blob — all different */ border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; /* Pill / capsule — fully rounded ends */ border-radius: 999px;
These are the most used border-radius patterns across UI design systems. Copy and adapt them directly.
/* Card — modern SaaS style */
.card { border-radius: 16px; }
/* Button — subtle rounding */
.btn { border-radius: 8px; }
/* Pill button */
.btn-pill { border-radius: 999px; }
/* Avatar / profile image circle */
.avatar { border-radius: 50%; }
/* Tab — rounded top only */
.tab { border-radius: 10px 10px 0 0; }
/* Badge / chip */
.badge { border-radius: 6px; }
/* Input field */
.input { border-radius: 8px; }
/* Modal dialog */
.modal { border-radius: 20px; }
border-radius is fully animatable via CSS transitions and animations. It is relatively cheap to animate because it only triggers a repaint, not a layout reflow. This makes it suitable for hover effects and morphing shapes.
/* Hover morph from card to circle */
.shape {
width: 120px;
height: 120px;
border-radius: 16px;
transition: border-radius 0.4s ease;
}
.shape:hover {
border-radius: 50%;
}
/* Pulsing blob animation */
@keyframes blob {
0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}
.blob {
animation: blob 6s ease-in-out infinite;
}
border-radius has been universally supported since 2011. No vendor prefixes or fallbacks are required in any modern project. The elliptical / syntax, longhand properties, and percentage values are all equally well supported.
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| border-radius (basic) | 4+ | 4+ | 5+ | 12+ |
| Elliptical / syntax | 4+ | 4+ | 5+ | 12+ |
| Longhand properties | 4+ | 4+ | 5+ | 12+ |
| % values | 4+ | 4+ | 5+ | 12+ |
| CSS transition | 26+ | 16+ | 7+ | 12+ |
px gives a fixed corner size regardless of element dimensions — a 16px radius is always 16px no matter how big or small the element is. % is relative to the element's width and height — 50% on a square element always produces a perfect circle, and the radius scales automatically as the element resizes. Use px for fixed UI components like buttons and cards; use % for shapes that need to maintain a circular or elliptical form at any size.
Set border-radius: 50% on an element with equal width and height. The 50% value calculates to exactly half the element's width and height, producing a circle. Example: width: 80px; height: 80px; border-radius: 50%;. If the element is not square, the same value produces an ellipse instead.
Use the four-value shorthand and set the other corners to 0. To round only the top two corners (tab shape): border-radius: 12px 12px 0 0. To round only the left side (for side panels): border-radius: 12px 0 0 12px. You can also use the longhand properties individually: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.
Use a very large px value such as 999px or 9999px. Browsers cap the corner radius at half the element's shortest dimension, so an excessively large value always produces fully rounded ends regardless of the element's size. This is more robust than 50% on non-square elements, where 50% produces an ellipse rather than a pill shape.
Not automatically. border-radius clips the background and border of the element but child elements can overflow outside the rounded corners. To force children to respect the rounded shape, add overflow: hidden to the parent container. This is especially important for images inside rounded cards.
Use the elliptical / syntax with different values for each corner. A classic blob: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%. Combine this with a CSS @keyframes animation that morphs between different blob values for a fluid animated effect — see the Animating border-radius section above.
No — border-image replaces the standard border rendering, which overrides border-radius. If you need both a gradient border and rounded corners, use the outline or background gradient technique instead. Our Gradient Border Generator implements this pattern correctly.
No. border-radius applies to the outer edge of the element's border box regardless of whether you use box-sizing: content-box or box-sizing: border-box. The radius is always calculated from the border edge.
border-radius works closely with other CSS properties. These tools on CSSTools.io help you build the complete effect: