Border radius (rounded corners) in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Tailwind CSS class rounded do?

It adds a small border radius to an element, making its corners slightly rounded.

beginner

How do you make an element have fully rounded corners (a circle) in Tailwind CSS?

Use the class rounded-full. This sets the border radius to 9999px, making the element perfectly round if its width and height are equal.

beginner

What is the difference between rounded-sm and rounded-lg in Tailwind CSS?

rounded-sm applies a small border radius, while rounded-lg applies a larger border radius, making corners more rounded.

intermediate

How can you round only the top-left corner of an element in Tailwind CSS?

Use the class rounded-tl to apply border radius only to the top-left corner.

intermediate

Why is using Tailwind's border radius classes better than writing custom CSS for rounded corners?

Tailwind classes are consistent, easy to use, and help keep your code clean and maintainable. They also support responsive design and theming.

Which Tailwind class makes an element's corners fully rounded?

A rounded-none

B rounded-full

C rounded-lg

D rounded-sm

rounded-full sets the border radius very high to make corners fully round, like a circle.

What does the class rounded-t do in Tailwind CSS?

A Rounds top-left and top-right corners

B Rounds all corners

C Rounds bottom corners

D Removes border radius

rounded-t rounds only the top-left and top-right corners.

If you want slightly rounded corners, which class should you use?

A rounded-none

B rounded-xl

C rounded-full

D rounded-sm

rounded-sm applies a small border radius for subtle rounding.

How do you remove all rounded corners from an element in Tailwind CSS?

A rounded-remove

B rounded-0

C rounded-none

D rounded-clear

rounded-none removes any border radius, making corners sharp.

Which class rounds only the bottom-right corner of an element?

A rounded-br

B rounded-bl

C rounded-tr

D rounded-tl

rounded-br applies border radius only to the bottom-right corner.

Explain how to use Tailwind CSS classes to round only specific corners of an element.

Think about the corner abbreviations: tl = top-left, br = bottom-right.

Describe the visual difference between using rounded-sm and rounded-full in Tailwind CSS.

Imagine a square with slightly rounded edges versus a circle.