Border radius (rounded corners) in Tailwind - Mini Project: Build & Apply

Create a Card with Rounded Corners Using Tailwind CSS

📖 Scenario: You are building a simple profile card for a website. The card should have a nice rounded corner style to look modern and friendly.

🎯 Goal: Build a card using Tailwind CSS that has a white background, some padding, and rounded corners using the rounded-lg class.

📋 What You'll Learn

Use a div with Tailwind classes for background color and padding

Add the Tailwind class rounded-lg to create rounded corners

Include a heading and a paragraph inside the card

Ensure the card is centered on the page

💡 Why This Matters

🌍 Real World

Rounded corners are common in modern web design to make elements look softer and more approachable.

💼 Career

Knowing how to use Tailwind CSS classes for styling is valuable for front-end developers working on user interfaces.

1

Create the HTML skeleton with a container div

Create a div with the class container mx-auto p-4 to center content and add padding.

Tailwind

Hint

The container class centers content, mx-auto centers horizontally, and p-4 adds padding.

2

Add a card div with background and padding

Inside the container div, add a div with classes bg-white p-6 to create a white background and padding for the card.

Tailwind

Hint

The bg-white class sets the background color to white, and p-6 adds padding inside the card.

3

Add the rounded corners using Tailwind

Add the Tailwind class rounded-lg to the card div to give it large rounded corners.

Tailwind

Hint

The rounded-lg class adds smooth, large rounded corners to the element.

4

Add heading and paragraph inside the card

Inside the card div with rounded-lg, add an h2 with text Profile Card and a p with text This card has rounded corners using Tailwind CSS..

Tailwind

Hint

Use semantic tags h2 and p inside the card div.

Practice

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