Border Radius Generator

The shorthand is border-radius: TL TR BR BL where each value sets a corner. You can also use border-radius: 50% to create a circle, or a single value like border-radius: 12px for uniform rounding. Tip: use percentage values for responsive shapes that scale with the element.

Set border-radius to a value equal to or larger than half the element's height. For example, border-radius: 9999px always creates a pill shape regardless of size. This is commonly used for tags, badges, and buttons.

Yes. Each corner accepts px, %, em, rem, vw, or vh independently. Mixing units like border-radius: 20px 50% 20px 50% is valid and creates asymmetric shapes useful for organic designs like blobs or chat bubbles.

Pixel values give fixed rounding regardless of element size. Percentage values are relative to the element's dimensions — 50% on a square makes a circle, but on a rectangle it creates an ellipse. Use % for responsive designs and px for consistent UI components.

Tailwind provides rounded-* utilities: rounded-sm (2px), rounded (4px), rounded-md (6px), rounded-lg (8px), rounded-xl (12px), rounded-2xl (16px), rounded-3xl (24px), and rounded-full (9999px). For individual corners use rounded-tl-*, rounded-tr-*, etc. Arbitrary values work too: rounded-[20px].