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.