Check out our free templates made with AI and polished to perfection in Windframe

Get now

rounded-es: Tailwind CSS Border Radius class

The rounded-es class in Tailwind CSS applies the default border-radius to the end-start corner of an element.


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

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

Example Code

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

Preview

This box has a rounded end-start corner.

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.

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs! 

Build from scratch or select prebuilt tailwind templates