Syntax
border-radius: value;
Example
border-radius: 0.5rem;
Common use cases
- Rounded cards and buttons
- Pill-shaped badges with border-radius: 9999px
- Circular avatars with border-radius: 50%
Practical developer insight
border-radius: 50% makes a perfect circle only if the element is square — if width and height differ, you get an ellipse.