0
0
Tailwindmarkup~5 mins

Border radius (rounded corners) in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Rounded corners make boxes and buttons look softer and friendlier. They improve the look and feel of a website.

To make buttons look inviting and easier to click.
To soften the edges of images or cards on a webpage.
When designing user interface elements like input fields or modals.
To create a modern and clean design style.
To visually separate sections with smooth edges.
Syntax
Tailwind
rounded
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
rounded-full
rounded-t
rounded-b
rounded-l
rounded-r
rounded-tl
rounded-tr
rounded-bl
rounded-br

Use rounded classes to add different sizes of rounded corners.

Use directional classes like rounded-tl to round only specific corners.

Examples
This adds a small default rounded corner to the box.
Tailwind
<div class="rounded bg-blue-500 p-4 text-white">Rounded corners</div>
This adds larger rounded corners for a softer look.
Tailwind
<div class="rounded-lg bg-green-500 p-4 text-white">Large rounded corners</div>
This rounds only the top-left corner fully, making it a circle shape on that corner.
Tailwind
<div class="rounded-tl-full bg-red-500 p-4 text-white">Only top-left corner rounded fully</div>
This makes the box fully rounded, like a pill or circle shape depending on size.
Tailwind
<div class="rounded-full bg-purple-500 p-4 text-white">Fully rounded (circle shape)</div>
Sample Program

This page shows four boxes with different rounded corners using Tailwind CSS classes. Each box has a background color, padding, and white text for contrast. The boxes are stacked vertically with space between them.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tailwind Border Radius Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col items-center gap-6 p-8 bg-gray-100 min-h-screen">
  <div class="rounded bg-blue-500 p-6 text-white w-64 text-center">Default rounded corners</div>
  <div class="rounded-lg bg-green-500 p-6 text-white w-64 text-center">Large rounded corners</div>
  <div class="rounded-tl-full bg-red-500 p-6 text-white w-64 text-center">Top-left fully rounded</div>
  <div class="rounded-full bg-purple-500 p-6 text-white w-64 text-center">Fully rounded (pill shape)</div>
</body>
</html>
OutputSuccess
Important Notes

Rounded corners improve user experience by making elements look friendlier.

Use rounded-full to create circles or pills, but ensure width and height match for perfect circles.

Combine with shadows and colors for modern UI design.

Summary

Use Tailwind's rounded classes to add rounded corners easily.

Different sizes and directions let you customize which corners are rounded.

Rounded corners make your website look modern and approachable.