What is CSS Border Radius Generator?
The CSS `border-radius` property rounds the corners of an element's outer border edge. You can set uniform rounding with a single value or control each corner independently. The shorthand accepts up to four values (top-left, top-right, bottom-right, bottom-left) and optionally separate horizontal/vertical radii with a `/` separator for elliptical corners. Rounded corners soften UI elements and are fundamental to modern web design.
Tips & Best Practices
- 1Use `border-radius: 50%` on a square element to create a perfect circle.
- 2Use `border-radius: 9999px` for pill-shaped buttons regardless of the element's dimensions.
- 3Combine different per-corner values to create organic, blob-like shapes.
- 4The `/` syntax (e.g., `border-radius: 50% / 30%`) creates elliptical corners — great for organic shapes.
- 5Apply `overflow: hidden` alongside border-radius to clip child content to the rounded shape.
- 6Use consistent border-radius values across your design system (e.g., 4px, 8px, 12px, 16px).
Frequently Asked Questions
Setting border-radius to 50% rounds each corner by half the element's width and height. On a square element, this creates a perfect circle. On a rectangular element, it creates an ellipse.
Use the shorthand with four values: `border-radius: top-left top-right bottom-right bottom-left`. Or use individual properties like `border-top-left-radius`, `border-top-right-radius`, etc.
Pixel values create fixed-size rounding regardless of element dimensions. Percentage values are relative to the element's width (horizontal) and height (vertical), so they scale with the element. For responsive designs, percentages often work better.
Yes. Use the `/` syntax to specify separate horizontal and vertical radii: `border-radius: 20px / 40px` makes corners that are wider than they are tall. Each corner can have its own elliptical values.
border-radius rounds the outer border edge and the padding edge follows the same curve. However, CSS outlines do not follow border-radius in all browsers. Use box-shadow as an outline alternative if you need rounded outlines.