rounded

The rounded class in Tailwind CSS applies a default border-radius of 0.25rem (4px) to all corners of an element. It's commonly used to slightly soften the edges of buttons, cards, images, and other UI components.

Syntax

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

Example Code

<div class="flex flex-col justify-center items-center gap-2 p-3 rounded-t-md bg-blue-50">
  <p class="text-gray-600 font-bold"> Rounded Corners</p>
  <div class="rounded bg-blue-500 p-4 w-32 text-white font-semibold">
  rounded
</div>
</div>

Preview

This will apply the same medium-level rounding to all four corners.

Use rounded when you want a subtle, consistent corner rounding that gives your components a cleaner and more polished feel without being too dramatic.