Border radius (rounded corners) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add small rounded corners to the button.

Tailwind

<button class="bg-blue-500 text-white p-2 [1]">Click me</button>

Drag options to blanks, or click blank then click option'

Arounded-sm

Brounded-lg

Crounded-full

Drounded-none

Attempts:

3 left

💡 Hint

Common Mistakes

Using rounded-full which makes the element fully round.

Using rounded-none which removes rounding.

The rounded-sm class adds small rounded corners to the element.

2fill in blank

medium

Complete the code to make the image have large rounded corners.

Tailwind

<img src="photo.jpg" alt="Photo" class="[1]">

Drag options to blanks, or click blank then click option'

Arounded-sm

Brounded-lg

Crounded-none

Drounded-xl

Attempts:

3 left

💡 Hint

Common Mistakes

Using rounded-none which removes rounding.

Using rounded-sm which is too small.

The rounded-xl class applies extra large rounded corners.

3fill in blank

hard

Fix the error in the code to make the card have fully rounded corners.

Tailwind

<div class="bg-white p-4 shadow [1]">Card content</div>

Drag options to blanks, or click blank then click option'

Arounded-full

Brounded-xl

Crounded-none

Drounded-lg

Attempts:

3 left

💡 Hint

Common Mistakes

Using rounded-none which removes rounding.

Using rounded-lg which is not fully round.

The rounded-full class makes the corners fully rounded, like a pill shape.

4fill in blank

hard

Fill both blanks to create a box with medium rounded corners and padding.

Tailwind

<div class="bg-gray-200 [1] [2]">Content</div>

Drag options to blanks, or click blank then click option'

Arounded-md

Bp-4

Cp-2

Drounded-sm

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing small rounding with large padding.

Using no padding or no rounding.

rounded-md adds medium rounded corners and p-4 adds padding of 1rem all around.

5fill in blank

hard

Fill all three blanks to style a button with large rounded corners, blue background, and white text.

Tailwind

<button class="[1] [2] [3]">Submit</button>

Drag options to blanks, or click blank then click option'

Arounded-lg

Bbg-blue-500

Ctext-white

Dp-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using p-1 instead of a color class.

Mixing up text and background color classes.

rounded-lg adds large rounded corners, bg-blue-500 sets a blue background, and text-white makes the text white.

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