What Is CSS Border Radius?
The CSS border-radius property rounds the corners of an element. You can set all four corners uniformly or individually control each corner for creative shapes like pills, circles, or organic blob-like designs.
Common Border Radius Patterns
- Pill shape: Set border-radius to half the element's height (e.g.,
border-radius: 9999px). - Circle: Use
border-radius: 50%on a square element. - Subtle rounding: Small values like 4-8px for card corners and buttons.
Frequently Asked Questions
Can I use percentages for border-radius?
Yes. Percentage values are relative to the element's dimensions. 50% on a square element creates a perfect circle. On non-square elements, it creates an ellipse.
Does border-radius work with images?
Yes. Apply border-radius directly to <img> elements or their container to create rounded image shapes. Combine with overflow: hidden for clean edges.