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.

How to Use

Add the rounded-t class directly to your HTML element:

<div class="rounded-t">
  <!-- Your content here -->
</div>

Responsive Usage

Use Tailwind's responsive prefixes to apply rounded-t at specific breakpoints:

<div class="sm:rounded-t md:rounded-t lg:rounded-t">
  Responsive element
</div>

• sm:rounded-t — applies from 640px and up
• md:rounded-t — applies from 768px and up
• lg:rounded-t — applies from 1024px and up

Customization

You can extend or override this utility in your tailwind.config.js. See the Tailwind CSS documentation for details on customizing your theme.

Related Classes

• Browse all Border Radius classes
• All Tailwind CSS classes