Tailwind CSS
/Beginner
Border Radius
Definition
Utilities for controlling the rounding of an element's corners.
Explain Like I'm New
Softening the sharp 90-degree corners of a box. `rounded` gives a tiny 4px curve. `rounded-xl` gives a massive Apple-style curve. `rounded-full` creates a perfect circle or a pill shape.
Real World Example
Applying `rounded-full` to a square `w-12 h-12` image to instantly turn it into a circular profile avatar.
Common Use Cases
- •Buttons
- •Avatars
- •Modern UI Cards
Interactive Example
Interview Questions
basic
- What Tailwind class turns a square image into a perfect circle?
intermediate
- Can you round only the top corners of a card, leaving the bottom corners sharp?