Loading...
Create CSS border-radius with visual controls for each corner. Generate circles, pills, and custom shapes.
CSS border-radius is a property that rounds the corners of an element's outer border edge, accepting pixel or percentage values to create shapes from subtle curves to perfect circles.
border-radius: 16px;Your current value in shorthand notation:
16px1 value: All corners the same
2 values: top-left/bottom-right | top-right/bottom-left
3 values: top-left | top-right/bottom-left | bottom-right
4 values: top-left | top-right | bottom-right | bottom-left
border-top-left-radius: 16px;border-top-right-radius: 16px;border-bottom-right-radius: 16px;border-bottom-left-radius: 16px;| Element | Typical Radius |
|---|---|
| Buttons | 4 to 8px |
| Cards | 8 to 16px |
| Modals | 12 to 24px |
| Pills/Tags | 9999px or 50% |
| Avatars (circle) | 50% |
| Inputs | 4 to 6px |
Formula
border-radius: top-left top-right bottom-right bottom-left / vertical radiiOne value = applies to all four corners
Slash form = values before the slash are horizontal radii, values after are vertical, which is how an ellipse rather than a circle is drawn
Percentages = resolve against the box width for horizontal radii and its height for vertical ones
Did you know? The squircle look on app icons is not a border-radius. A radius produces a circular arc that meets the straight edge abruptly, while a squircle uses a superellipse whose curvature changes continuously, which is why CSS corners never quite match an iOS icon.
Sources
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Calculate required internet bandwidth based on devices and activities in your household.
Encode and decode Base64 strings. Convert text for data URIs, APIs, and safe data transmission.
Create CSS box shadows with multiple layers, live preview, and copy-ready code.
Preview how colors appear with different types of color blindness. Test accessibility for color vision deficiency.
Convert colors between HEX, RGB, HSL, and OKLCH. Includes alpha support and copy buttons for CSS-ready formats.