Border radius (rounded corners) in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the correct Tailwind class for a medium rounded corner?

Choose the Tailwind CSS class that applies a medium border radius to an element.

A rounded-xl

B rounded-lg

C rounded-sm

D rounded-md

💡 Hint

Tailwind uses size abbreviations like sm, md, lg, xl for border radius sizes.

The class rounded-md applies a medium border radius. Other options apply different sizes.

❓ rendering

intermediate

Which Tailwind class will create fully rounded (circle) corners on a square element?

Select the Tailwind CSS class that makes a square element appear as a circle by rounding all corners fully.

A rounded-none

B rounded-full

C rounded-lg

D rounded-xl

💡 Hint

Think about which class makes corners fully round, like a circle.

The rounded-full class makes the border radius large enough to create a circle shape on square elements.

❓ selector

advanced

Which Tailwind class rounds only the top-left corner?

Identify the Tailwind CSS class that applies rounding only to the top-left corner of an element.

A rounded-bl-md

B rounded-tr-md

C rounded-tl-md

D rounded-br-md

💡 Hint

Look for the class with 'tl' which stands for top-left.

The rounded-tl-md class rounds only the top-left corner with medium radius.

❓ layout

advanced

How does rounded-none affect an element's corners?

What visual effect does the Tailwind class rounded-none have on an element's corners?

A Removes all rounding, making corners sharp

B Applies the smallest rounding to corners

C Rounds only the bottom corners

D Rounds all corners fully

💡 Hint

Think about what 'none' means for border radius.

The rounded-none class removes any border radius, so corners are sharp (square).

❓ accessibility

expert

Why is it important to consider border radius in accessible design?

Select the best reason why using border radius thoughtfully improves accessibility in web design.

A Rounded corners can help users visually distinguish interactive elements

B Border radius improves keyboard navigation automatically

C Border radius fixes screen reader issues

D Rounded corners increase color contrast by default

💡 Hint

Think about how shape affects visual clarity and user focus.

Rounded corners can make buttons and inputs stand out visually, helping users identify interactive parts easily.

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