rounded-r

The rounded-r class in Tailwind CSS applies the default border-radius to the right side of an element — specifically the top-right and bottom-right corners. It’s useful when you want smooth rounding on one side only, such as in button groups, input fields, or card edges.

Syntax

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

Example Code

<div class="flex">
  <input type="text" class="border px-4 py-2 rounded-l" placeholder="Email" />
  <button class="bg-blue-600 text-white px-4 py-2 rounded-r">
    Subscribe
  </button>
</div>

Preview

In this case, rounded-r gives the button a rounded right edge, while rounded-l shapes the input's left side — perfect for building grouped elements.