What Does CSS border-radius Do?
The border-radius property rounds an element's outer border edge. A single value creates uniform circular corners, four values control individual corners, and slash-separated horizontal and vertical values create ellipses and organic shapes.
Build More Than Rounded Cards
◜ Independent corners
Link all corners for speed or unlink them to create directional cards, tabs and callout shapes.
⬭ Elliptical curves
Control horizontal and vertical radius components independently using the full slash syntax.
● Shape presets
Start with squares, cards, pills, circles, leaves, arches, drops and organic blobs.
↔ Real dimensions
Change width and height because percentage radii depend on the actual box proportions.
🎨 Styled preview
Test gradients, borders and shadows to understand how curves behave in realistic components.
📋 Reusable output
Copy CSS, download a stylesheet or share an exact configuration through URL parameters.
Understanding Border-Radius Syntax
One to four values map clockwise from top-left.
border-radius: 16px 32px 8px 24px;The slash separates horizontal values from vertical values.
border-radius: 60% 40% / 30% 70%;When four values are used, the order is top-left, top-right, bottom-right, bottom-left. Browsers may proportionally scale radii when opposing values would overlap, ensuring the curves still fit the element.
Practical Design Tips
- Use a consistent small radius scale for buttons, inputs and cards instead of unrelated values.
- A pill needs a radius at least half the element's height; a very large pixel value is also safely capped by the browser.
- A circle requires equal width and height with
border-radius: 50%. - Percentage radii respond to element dimensions, making them ideal for fluid ellipses and blob shapes.
- Check that rounded clipping does not hide focus indicators, content or important imagery.
Frequently Asked Questions
Why does a huge radius not keep changing the corner?
Browsers normalize overlapping radii so the curves fit inside the box. Once a corner reaches the geometric limit, larger values can look identical.
What does the slash in border-radius mean?
It separates horizontal corner radii from vertical corner radii. This allows each corner to be an ellipse rather than a quarter-circle.
Should I use px, rem or percent?
Pixels give exact component geometry, rem scales with the root font size, and percentages relate the curve to the element dimensions.
Does border-radius clip child content?
Not by itself. Add overflow: hidden when child backgrounds or media must be clipped to the rounded edge, but verify that focus indicators remain visible.