Bird
Raised Fist0
Tailwindmarkup~5 mins

Border radius (rounded corners) in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What does the Tailwind CSS class rounded do to an element?
easy
A. Adds rounded corners to all sides of the element
B. Adds a border to the element
C. Changes the background color of the element
D. Adds padding inside the element

Solution

  1. Step 1: Understand the purpose of rounded class

    The rounded class in Tailwind CSS is used to add rounded corners to elements.

  2. Step 2: Identify what rounded affects

    It affects the border radius, making the corners curved instead of sharp.

  3. Final Answer:

    Adds rounded corners to all sides of the element -> Option A

  4. Quick Check:

    Rounded corners = rounded class [OK]
Hint: Rounded corners come from the rounded class [OK]
Common Mistakes:
  • Confusing rounded corners with borders
  • Thinking it changes colors
  • Assuming it adds padding
2. Which Tailwind class correctly applies a medium border radius to an element?
easy
A. rounded-lg
B. rounded-md
C. rounded-xl
D. rounded-sm

Solution

  1. Step 1: Recall Tailwind border radius sizes

    Tailwind uses rounded-sm for small, rounded-md for medium, rounded-lg for large, and rounded-xl for extra large radius.

  2. Step 2: Identify the medium size class

    The medium border radius class is rounded-md.

  3. Final Answer:

    rounded-md -> Option B

  4. Quick Check:

    Medium radius = rounded-md [OK]
Hint: Medium radius uses rounded-md class [OK]
Common Mistakes:
  • Choosing rounded-lg or rounded-xl for medium
  • Confusing rounded-sm as medium
  • Misspelling class names
3. What will be the visual effect of this HTML snippet?
<div class="w-32 h-32 bg-blue-500 rounded-tl-lg rounded-br-lg"></div>
medium
A. No corners are rounded
B. All corners are large rounded
C. Only the top-left corner is rounded
D. The top-left and bottom-right corners are large rounded; others are sharp

Solution

  1. Step 1: Understand the classes used

    The classes rounded-tl-lg and rounded-br-lg apply large rounding to the top-left and bottom-right corners respectively.

  2. Step 2: Visualize the effect on the box

    Only these two corners will be rounded large; the other corners remain sharp (no rounding).

  3. Final Answer:

    The top-left and bottom-right corners are large rounded; others are sharp -> Option D

  4. Quick Check:

    Specific corners rounded = rounded-tl-lg and rounded-br-lg [OK]
Hint: Classes with corner abbreviations round only those corners [OK]
Common Mistakes:
  • Assuming all corners round with these classes
  • Mixing corner abbreviations
  • Ignoring the size suffix like -lg
4. Identify the error in this Tailwind usage:
<button class="rounded-top-md bg-green-400 p-4">Click</button>
medium
A. The class rounded-top-md is invalid in Tailwind
B. The padding class p-4 is incorrect
C. The background color class bg-green-400 is invalid
D. The button tag cannot have rounded corners

Solution

  1. Step 1: Check the border radius class syntax

    Tailwind uses rounded-t for top corners, not rounded-top.

  2. Step 2: Confirm other classes

    p-4 and bg-green-400 are valid Tailwind classes, and buttons can have rounded corners.

  3. Final Answer:

    The class rounded-top-md is invalid in Tailwind -> Option A

  4. Quick Check:

    Correct top rounding class = rounded-t-md [OK]
Hint: Use rounded-t-md for top corners, not rounded-top-md [OK]
Common Mistakes:
  • Using non-existent class names
  • Confusing padding with border radius
  • Thinking buttons can't have rounded corners
5. You want a card with only the bottom corners rounded to extra large size using Tailwind. Which single class achieves this?
hard
A. rounded-xl
B. rounded-bl-xl rounded-br-xl
C. rounded-b-xl
D. rounded-bottom-xl

Solution

  1. Step 1: Understand bottom corner rounding classes

    rounded-b-xl rounds both bottom-left and bottom-right corners to extra large size.

  2. Step 2: Compare with other options

    rounded-bl-xl and rounded-br-xl individually round corners but rounded-b-xl is simpler and correct. rounded-xl rounds all corners, and rounded-bottom-xl is invalid.

  3. Final Answer:

    rounded-b-xl -> Option C

  4. Quick Check:

    Bottom corners extra large = rounded-b-xl [OK]
Hint: Use rounded-b-xl for both bottom corners [OK]
Common Mistakes:
  • Using invalid class rounded-bottom-xl
  • Using separate classes when shorthand exists
  • Choosing rounded-xl which rounds all corners