rounded-t: Tailwind CSS Border Radius class

The rounded-t class in Tailwind CSS applies a border radius to the top-left and top-right corners of an element.

rounded-t

The rounded-t class in Tailwind CSS applies a border radius to the top-left and top-right corners of an element. It’s useful for giving the top side of a box a smooth, rounded appearance—often seen in cards, modals, and tab components.

Syntax

html
<div class="rounded-t">...</div>

Example Code

html
<div class="bg-white shadow rounded-t p-4">
	This box has rounded top corners.
</div>

Preview

This box has rounded top corners.

Use rounded-t to add consistent, smooth rounding to the top of elements, especially when styling containers, cards, or tab interfaces. It's a quick way to create polished, modern UI sections.

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates
Learn more about Windframe