rounded-s-xl

The rounded-s-xl class in Tailwind CSS applies an extra-large (xl) border-radius to the start side of an element — which means the left side in left-to-right (LTR) layouts and the right side in right-to-left (RTL) layouts. This includes both the top-start and bottom-start corners, and it adapts automatically based on text direction.

Syntax

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

Example Code

<div class="bg-blue-500 text-white font-semibold p-4 rounded-s-xl">
  This box has extra-large rounding on the start side.
</div>

Preview

Use rounded-s-xl when you want to apply extra-large border-radius to the start side of an element. It's ideal for UI components like buttons, cards, and flexible layouts that need direction-aware styling.