Generate border-radius CSS for uniform corners, four-corner shorthand, or elliptical slash syntax with live preview.
Last updated: August 2026 | By Workshelve Team
.box {
border-radius: 16px;
}The CSS border-radius property rounds an element's outer corners. It works even when no visible border is drawn, so it is commonly used for cards, buttons, avatars, pills, panels, and clipped media containers.
Uniform mode applies one radius to every corner. Corner mode emits the four-value shorthand in top-left, top-right, bottom-right, bottom-left order. Elliptical mode uses slash syntax to give each corner separate horizontal and vertical radii.
This tool is one-way because valid border-radius CSS can be compressed into one, two, three, four, or slash-separated values, and real styles may also come from cascade, variables, or individual corner properties.
Give a card stronger rounding on opposite corners:
Four-value border-radius moves clockwise from top-left, unlike margin and padding shorthand, which start at the top edge.
No. CSS radius values cannot be negative, so the generator rejects negative input.
Yes. Zero is valid and produces square corners. It is useful for resetting inherited or component-level rounding.
A 50% radius can create circles, ovals, or pills depending on the element dimensions. The radius is calculated relative to the box size.
Slash syntax separates horizontal radii from vertical radii. For example, 50% / 20% creates a wider horizontal curve than vertical curve.
The four-value border-radius shorthand starts at top-left and moves clockwise: top-left, top-right, bottom-right, bottom-left.
No. It rounds the element box and affects backgrounds, overflow clipping when enabled, and visible borders when present.
Yes. rem and em are valid length units and are often useful when radius should scale with typography or design tokens.
Border-radius can be expressed through many equivalent shorthands and individual corner properties, so reverse parsing would be partial and potentially misleading.
Related Tools
Build and preview common CSS Grid layout patterns.
Build linear and radial gradients with custom color stops.
Remove, replace, and export image metadata.
Generate and inspect solid background-color declarations.
Generate gradient and image background-image CSS.
Generate uniform or side-specific CSS border declarations.