rounded-tr-md

The rounded-tr-md class in Tailwind CSS applies a medium border radius to the top-right corner of an element. This gives a slightly more noticeable curve than the default size and is great for refining the visual style of cards, modals, or input fields.

Syntax

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

Example Code

<div class="bg-lime-600 text-white font-semibold p-4 border rounded-tr-md shadow">
  Top-right corner has a medium curve
</div>

Preview

Use rounded-tr-md when you want a moderate rounding on just the top-right corner of an element. It offers a clean, subtle visual enhancement, especially in UI layouts with directional rounding.