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.