rounded-s

The rounded-s class in Tailwind CSS applies the default border-radius to the start side of an element. In left-to-right (LTR) layouts, this affects the top-left and bottom-left corners. In right-to-left (RTL) layouts, it targets the top-right and bottom-right corners. This utility is useful for building direction-aware UIs.

Syntax

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

Example Code

<div class="bg-green-600 text-white p-4 font-semibold rounded-s">
  Rounded start-side corners.
</div>

Preview

Use rounded-s when you want to apply the default border-radius to the start side of an element. It's perfect for creating rounded button groups, cards, and form controls that adapt to both LTR and RTL layouts.