CSS Border Radius Generator

border-radius is a CSS property that rounds the corners of an element's outer border edge. Instead of the default sharp right-angle corners, the browser draws an arc based on the radius value you supply. A single value like border-radius: 10px applies the same rounding to all four corners, while multiple values let you control each corner independently.

Set border-radius: 50% on an element that has equal width and height. Using a percentage value means the radius is calculated as half the element's dimensions, producing a perfect circle regardless of the element's size. For example: width: 100px; height: 100px; border-radius: 50%; will render a circle. If the element is not square, the same rule produces an ellipse instead.

You can either use the shorthand with multiple values or the individual corner properties. With the shorthand, values are applied clockwise from the top-left: border-radius: 10px 20px 5px 40px sets top-left, top-right, bottom-right, and bottom-left respectively. Alternatively, use the individual properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius to target specific corners directly.

A px value sets an absolute radius that stays fixed regardless of the element's size - useful when you want consistent rounding at a known size, such as a 4px radius on a button. A % value is relative to the element's dimensions: for the horizontal radius it is a percentage of the element's width, and for the vertical radius it is a percentage of the height. This means 50% always produces a perfect circle or ellipse no matter how the element is sized, making it the preferred approach for responsive designs.

Use the slash syntax to specify separate horizontal and vertical radii: border-radius: 20px / 35px. The value before the slash sets the horizontal radius for all corners and the value after sets the vertical radius, producing an oval arc rather than a circular one. Both sides of the slash follow the same one-to-four value rules as the standard shorthand, so you can combine them to set elliptical radii on individual corners independently.

When two values are supplied, the first sets the radius for the top-left and bottom-right corners, and the second sets the radius for the top-right and bottom-left corners. So border-radius: 10px 20px gives you two pairs of diagonally opposite corners with different rounding - a common technique for creating distinctive card or badge shapes.

corner-shape is a newer, experimental CSS property that works alongside border-radius to change the type of curve used at each corner, rather than just its size. While border-radius controls how large the rounded area is, corner-shape controls its geometry - options include round (the classic arc), scoop (a concave curve cutting inward), bevel (a straight diagonal cut), notch (a sharp right-angle cut inward), squircle, and superellipse. Because it is still experimental, browser support is limited and it should be used with a fallback.

Yes. border-radius is an animatable property, so it works with both CSS transitions and CSS animations. For example, you can smoothly transition a square button to a pill shape on hover: transition: border-radius 0.3s ease; combined with a :hover rule that changes the radius value. The browser interpolates between the start and end radius values, including complex multi-value and slash-syntax declarations.

Set border-radius to a value that is at least half the element's height. A common shortcut is to use a very large value like border-radius: 9999px - the browser caps the radius at the maximum possible for the element's dimensions, which always produces fully rounded ends regardless of the element's width. This works on buttons, tags, badges, and any other element where you want a true pill or capsule appearance.

No. border-radius is purely visual - it clips the painted appearance of the element but does not change its box model, so the element's width, height, margin, and padding are completely unaffected. However, the clipped corners do affect overflow: content or child elements that extend into a rounded corner will be clipped if overflow: hidden is set on the parent. The clickable hit area also remains rectangular, matching the element's full bounding box rather than the visible rounded shape.