What is CSS border-radius?

CSS border-radius rounds the corners of an element's border box. It accepts one to four values specifying the radius of each corner. You can create circles, ellipses, pill shapes, and complex organic curves using this property alone or in combination with individual corner properties.

What is the difference between border-radius shorthand and individual corner properties?

The shorthand border-radius accepts 1-4 values that map to corners in clockwise order: top-left, top-right, bottom-right, bottom-left. Individual properties (border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius) let you control each corner with two values for asymmetric (elliptical) corners.

How do I create a perfect circle with border-radius?

Set border-radius to 50% on a square element. Since percentage values are relative to the element's dimensions, 50% in each direction creates an ellipse — a perfect circle when width equals height. Alternatively, use a very large fixed value like 9999px, which also works regardless of the exact dimensions.

What are elliptical border-radius values?

Border-radius can take two values per corner separated by a slash, defining horizontal and vertical radii independently: `border-radius: 50px / 25px`. This creates an elliptical curve. The individual corner properties also accept two values: `border-top-left-radius: 50px 25px`.

Does border-radius affect the click area or overflow of an element?

Border-radius rounds only the visual appearance of corners. By default, content and click area remain rectangular. To clip content at the corners (e.g., to make an image truly circular), add overflow: hidden. The click area remains rectangular unless you also use clip-path.

How do I use border-radius in a design system?

Design systems typically define a set of radius tokens: --radius-sm (4px), --radius-md (8px), --radius-lg (16px), --radius-full (9999px). Apply these consistently across components: small radius for inputs and badges, medium for cards, large for modals, full for pills and avatar circles.

Is border-radius supported in all browsers?

border-radius is supported in all modern browsers and has been since IE9. No vendor prefixes are needed. All corner-radius combinations including elliptical values with slash notation are universally supported.

Border Radius
Generator

Generate CSS border-radius values with live preview. Independently control each corner or lock them together for uniform rounding.

All 4 cornersLock / unlockCSS-ready

① Drag sliders to set corner radius ② Lock corners for uniform rounding ③ Copy the CSS

Presets

Top left: 20px

Top right: 20px

Bottom left: 20px

Bottom right: 20px

Generated CSS

border-radius: 20px;

Individual corners

CSS border-radius accepts up to 4 values to control each corner independently: top-left, top-right, bottom-right, bottom-left (clockwise).

Shorthand

When all corners are equal, a single value is output. CSS also supports elliptical radii using the "/" syntax for organic shapes.

Units

Border-radius accepts px (absolute), % (relative to element size) and other length units. 50% on a square creates a perfect circle.

CSS border-radius — corners, shapes and browser support

The CSS border-radius property rounds the corners of an element's border box. It accepts up to four values in clockwise order (top-left, top-right, bottom-right, bottom-left) using px, %, em, or rem units. A single value applies uniformly to all corners. Setting border-radius: 50% on a square element creates a perfect circle; border-radius: 9999px creates a pill shape. The slash syntax (border-radius: 50px / 25px) defines elliptical corners with independent horizontal and vertical radii. To clip images or content at rounded corners, add overflow: hidden. Supported in all modern browsers since CSS3 — no vendor prefixes required. In Figma, paste these values directly into the corner radius fields.

Frequently asked questions

The CSS border-radius property rounds the corners of an element's border box. It accepts 1–4 length values (px, %, em) for each corner in clockwise order: top-left, top-right, bottom-right, bottom-left.

1 value: all corners equal. 2 values: TL/BR and TR/BL. 3 values: TL, TR/BL, BR. 4 values: TL, TR, BR, BL (clockwise). When all four are equal, the generator outputs a single value for cleaner code.

Pixel values give absolute corner sizes regardless of element dimensions. Percentage values are relative to the element's dimensions — 50% creates a circle if the element is square, or an ellipse otherwise.

Set border-radius: 50% on a square element (equal width and height). For rectangular elements, use border-radius: 50% / 50% which creates an ellipse matching the element proportions.

Border-radius has minimal performance impact in static elements. However, animating border-radius or using it with complex backgrounds can trigger repaints. Using border-radius with transform on the GPU layer is more performant.

In Figma, border-radius is set per corner in the design panel. Copy this tool's output values directly. In Sketch, use the corner radius handles. Both tools support mixed corner radii like this generator.

Border-radius works on most HTML elements including div, button, img, input and table. Note that border-radius on img requires overflow: hidden to clip the image. It also works on SVG shapes in most modern browsers.

CSS border-radius — corners, shapes and browser support

Frequently asked questions

Explore Our Network