rounded-se

The rounded-se class in Tailwind CSS applies the default border-radius to the start-end corner of an element. In left-to-right (LTR) layouts, this targets the bottom-left corner. In right-to-left (RTL) layouts, it targets the bottom-right corner. It's part of Tailwind's logical corner system, which makes your UI direction-aware by default.

Syntax

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

Example Code

<div class="bg-yellow-500 text-white font-bold p-4 rounded-se">
  This box has a rounded start-end corner.
</div>

Preview

Use rounded-se when you need to apply a border-radius to the bottom corner on the start-end side of an element. It’s great for direction-aware UI components like cards, popups, or buttons that need precise styling based on layout direction.