rounded-es

The rounded-es class in Tailwind CSS applies the default border-radius to the end-start corner of an element. In left-to-right (LTR) layouts, this affects the top-right corner; in right-to-left (RTL) layouts, it targets the top-left corner. It’s part of Tailwind’s logical corner utilities, which adapt to text direction automatically.

Syntax

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

Example Code

<div class="bg-indigo-600 text-white font-semibold p-4 rounded-es">
  This box has a rounded end-start corner.
</div>

Preview

Use rounded-es when you need to apply a default radius to the top corner on the end-start side of an element. It’s great for building direction-aware buttons, cards, and custom UI elements.