Check out our free templates made with AI and polished to perfection in Windframe

Get now

rounded: Tailwind CSS Border Radius class

The rounded class in Tailwind CSS applies a default border-radius of 0.25rem (4px) to all corners of an element.


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

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

Example Code

html
<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

Rounded Corners

rounded

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.

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs! 

Build from scratch or select prebuilt tailwind templates