Generate CSS border-radius code online free with a live shape preview. Control each corner independently to create circles, pills, and custom organic shapes instantly.
Full corner control (border-top-left-radius, etc.) produces organic shapes that feel more dynamic than uniform rounding - common in modern card and blob designs. The generator handles the four-value syntax so you don't have to.
Set CSS border-radius values for each corner independently, preview the result live, and copy the border-radius property. From simple rounded corners to complex organic shapes.
Create pill-shaped buttons with border-radius: 999px, design card components with top-only rounded corners, build organic blob shapes using asymmetric border-radius values, create avatar image circles, design custom chip and tag components, and build speech bubble tail shapes.
The most common question is how to make a circle. Set border-radius: 50% on an element with equal width and height - this creates a perfect circle. For non-square elements, 50% creates an ellipse instead.
Start with a rectangle and adjust its width and height.
Drag sliders for each corner radius independently.
See the shape update in real time as you adjust.
Copy the border-radius CSS value to your stylesheet.
Common questions about this tool and how to use it.
border-radius can take 1–4 values. One value: applies to all four corners. Two values: first applies to top-left and bottom-right, second to top-right and bottom-left. Three values: top-left, top-right+bottom-left, bottom-right. Four values: top-left top-right bottom-right bottom-left (clockwise). Example: border-radius: 8px 16px 8px 16px; creates alternating corner rounding.
Set border-radius: 50% on an element that has equal width and height. For example: width: 80px; height: 80px; border-radius: 50%; - creates a perfect circle. For non-square elements, 50% creates an ellipse. border-radius: 999px or border-radius: 9999px is an alternative that creates pill shapes for elements of any size, as long as the value exceeds half the element's dimensions.
Use individual corner properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Or use shorthand with specific values: border-radius: 12px 12px 0 0; - rounds only the top two corners, leaves the bottom two sharp. This is commonly used for card headers, tab components, and top-attached modals.
CSS border-radius supports elliptical corners using two values separated by a slash: border-radius: 50% / 30%; - 50% horizontal radius, 30% vertical radius, creating an ellipse. The full syntax: border-radius: h-radius / v-radius. This is used for leaf shapes, oval buttons, and organic blob shapes. Example: border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; creates a blob-like shape.
Pixel values are fixed regardless of element size - border-radius: 8px always creates an 8px radius corner. Percentage values are relative to the element's dimensions - border-radius: 50% creates a circle on a square element but an ellipse on a rectangle. Use px for UI components where the corner size should stay consistent. Use % when you want the corner rounding to scale proportionally with the element.
Leave your email so we can prioritize similar tools and updates.
Trending tools will appear as visitors explore the catalog.
Your recently visited tools will show up here.