rounded-es-xl

The rounded-es-xl class in Tailwind CSS applies an extra-large (xl) border-radius to the end-start corner of an element. In left-to-right (LTR) layouts, this targets the top-right corner; in right-to-left (RTL) layouts, it applies to the top-left corner. This utility is part of Tailwind’s logical corner system that adapts to text direction automatically.

Syntax

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

Example Code

<div class="bg-teal-600 text-white font-semibold p-4 rounded-es-xl">
  This element has an extra-large radius on the top-end corner.
</div>

Preview

Use rounded-es-xl when you want to apply a large radius to the top corner on the end-start side, in a layout-aware way. It’s great for components like cards, panels, or buttons with dynamic direction support.