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

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

Example Code

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

Preview

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.