Border Radius
Generate complex border radius values with visual controls for each corner
The border-radius property rounds the corners of an element's outer border edge. It can create anything from subtle rounded corners to complex organic shapes.
1Understanding Border Radius Anatomy
border-radius: TL TR BR BL;2Common Patterns
8px50% / 9999px40px3Design Principles
Consistency
Use a scale system (4px, 8px, 16px) across your UI for visual harmony.
Proportional Scaling
Larger elements should have larger border-radius values.
4Quick Reference
4px6px8px12px16px9999pxWhat 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.
Read the full CSS border-radius guideTips & 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.