Check out our free templates made with AI and polished to perfection in Windframe
Get nowrounded: 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!
