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–8px |
| Cards | 8–16px |
| Modals | 12–24px |
| Pills/Tags | 9999px or 50% |
| Avatars (circle) | 50% |
| Inputs | 4–6px |
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Convert width/height to aspect ratios, scale dimensions, and generate responsive embed CSS for any layout.
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.