Border Radius in Tailwind CSS

Tailwind provides a comprehensive set of border radius utilities, ranging from subtle rounds to full pills and circles. These are all built into the rounded-* family of classes.

Standard Radius Utilities

Use classes like rounded-md or rounded-2xl to apply consistent rounding to all corners of an element.

<div class="rounded-xl bg-blue-500">...</div>

Side-Specific Rounding

You can round specific sides by adding t, r, b, or l to the utility name.

• rounded-t-lg: Rounds only the top-left and top-right corners.
• rounded-b-lg: Rounds only the bottom-left and bottom-right corners.

Corner-Specific Rounding

For even more granular control, use the corner-specific utilities: tl, tr, br, and bl.

<div class="rounded-tl-3xl rounded-br-3xl">...</div>

Arbitrary Values

Need a very specific radius? Use the square bracket syntax to provide any valid CSS value.

<div class="rounded-[2.5rem]">...</div>