rounded-tr

The rounded-tr class in Tailwind CSS adds a default border radius to the top-right corner of an element. It's useful when you want only that specific corner to have a smooth, rounded edge.

Syntax

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

Example Code

<div class="bg-teal-600 text-white font-semibold p-4 rounded-tr border">
  Only the top-right corner is rounded
</div>

Preview

Use rounded-tr when you need to soften just the top-right corner of a box or container. It pairs well with other rounded-* classes for creating unique card shapes, panels, or UI sections.