Border Radius Generator

CSS border-radius is a property that rounds the corners of an element's outer border edge. You can set it for all four corners at once or control each corner individually. Values can be in pixels, percentages, or other CSS length units. Setting border-radius to 50% on a square element creates a perfect circle.

The border-radius shorthand accepts one to four values: one value applies to all corners, two values set top-left/bottom-right and top-right/bottom-left, three values set top-left, top-right/bottom-left, and bottom-right, and four values set each corner individually clockwise starting from top-left.

Yes, percentages are relative to the element's dimensions. Using 50% creates a circle (if the element is square) or an ellipse (if rectangular). Pixel values create consistent curves regardless of element size, while percentages scale with the element. This tool supports both px and % units.

The shorthand border-radius sets all corners at once, while individual properties like border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius let you control each corner separately. The shorthand is more concise, but longhand properties are useful when you only need to override one corner.

Border-radius visually clips the element's background, border, and any overflow-hidden content to the rounded shape. It also affects the element's clickable area -- areas outside the rounded corners will not register clicks. However, the element's box model (width, height, margin) still occupies a rectangular space in the layout.