rounded-e

The rounded-e class in Tailwind CSS applies the default border-radius to the end side of an element — which refers to the right side in left-to-right (LTR) layouts and the left side in right-to-left (RTL) layouts. This includes both the top-end and bottom-end corners, making it useful for directional UI styling.

Syntax

Example Code

<div class="flex font-semibold">
  <button class="bg-gray-300 px-4 py-2 rounded-s">Back</button>
  <button class="bg-indigo-600 text-white px-4 py-2 rounded-e">Next</button>
</div>

Preview

In the example above, rounded-e gives the "Next" button rounded corners on the right side (or end side), while rounded-s rounds the start side of the "Back" button — perfect for grouped buttons or inputs.