Check out our free templates made with AI and polished to perfection in Windframe

Get now

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 a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs! 

Build from scratch or select prebuilt tailwind templates