What Is CSS border-radius Property?
The CSS `border-radius` property rounds the corners of an element's outer border edge by defining elliptical corner radii, affecting both the background and border rendering. It is a shorthand for four individual properties (`border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius`) defined in the CSS Backgrounds and Borders Module Level 3 specification. Unlike purely decorative techniques, `border-radius` also clips the element's background and, when `overflow: hidden` is set, its child content to the rounded shape.
What Is CSS border-radius Property?
The CSS `border-radius` property rounds the corners of an element's outer border edge by defining elliptical corner radii, affecting both the background and border rendering. It is a shorthand for four individual properties (`border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius`) defined in the CSS Backgrounds and Borders Module Level 3 specification. Unlike purely decorative techniques, `border-radius` also clips the element's background and, when `overflow: hidden` is set, its child content to the rounded shape.
How CSS border-radius Property Works
At the rendering level, the browser calculates four elliptical arcs — one per corner — based on the horizontal and vertical radii you specify. The shorthand `border-radius: 8px` applies a uniform 8px radius to all four corners, while `border-radius: 50%` produces a perfect circle on elements with equal width and height because the percentage is calculated relative to each dimension independently. The two-value slash syntax — e.g., `border-radius: 10px / 20px` — sets asymmetric horizontal and vertical radii, producing elliptical rather than circular corners, which is particularly useful for pill-shaped buttons or stadium-shaped containers. The percentage calculation follows the CSS spec precisely: horizontal radii percentages are relative to the element's width, and vertical radii percentages are relative to its height. This means `border-radius: 50%` on a 200×100px element produces corners with 100px horizontal and 50px vertical radii, resulting in an ellipse rather than a circle. Understanding this distinction prevents the common bug where developers expect a circle but get an ellipse because they forgot to enforce equal dimensions via `aspect-ratio: 1` or explicit equal `width` and `height`. When corner radii of adjacent corners overlap — i.e., their combined radii exceed the element's dimension — browsers invoke the CSS 'corner overlap' reduction algorithm from the spec, which proportionally scales all radii down so no two adjacent corners ever overlap. This means you can safely set `border-radius: 9999px` as a reliable 'maximum radius' technique to create pill shapes without needing to know the exact element height; the algorithm handles any overflow gracefully. The property interacts closely with `overflow`, `clip-path`, and `outline`. Notably, `border-radius` clips the background and border but does NOT clip child content unless `overflow: hidden` is explicitly declared — a frequent source of confusion when images or child elements visually bleed past rounded corners. Additionally, `outline` does not follow the rounded shape in all browsers (though modern browsers increasingly support `outline` following `border-radius` per the updated spec), so rounded-corner interactive elements often require custom `box-shadow` focus rings for fully polished accessible designs.
Best Practices for CSS border-radius Property
Use `border-radius: 9999px` instead of `border-radius: 50%` for pill-shaped buttons to guarantee a fully rounded shape regardless of text-wrapping or dynamic width changes — `50%` on a wide rectangle produces an ellipse, not a pill. Always pair `border-radius` with `overflow: hidden` on image containers (cards, avatars) to prevent child `<img>` elements from rendering outside the rounded boundary. When building reusable components, define radii as CSS custom properties (e.g., `--radius-md: 8px`) or reference Bootstrap 5's `$border-radius` Sass variables so changes propagate consistently across the design system rather than hunting down hardcoded values. For accessibility, complement rounded interactive elements with a `box-shadow`-based focus ring (`box-shadow: 0 0 0 3px rgba(0,123,255,0.5)`) rather than relying solely on `outline`, which may not visually follow the curve in older rendering engines.
CSS border-radius Property & Canvas Builder
Canvas Builder's AI generates Bootstrap 5 HTML output that leverages Bootstrap's built-in `rounded-*` utility classes, which are compiled from the framework's `$border-radius`, `$border-radius-sm`, `$border-radius-lg`, and `$border-radius-pill` Sass variables — giving developers a consistent, overridable rounding system out of the box. The clean semantic markup Canvas Builder produces means `border-radius` is applied at the component level through meaningful utility classes rather than scattered inline styles, making design-token-style theming straightforward. Because Canvas Builder targets production-ready output, it also correctly pairs `overflow: hidden` with rounded image containers in card components, preventing the common child-bleed rendering bug that plagues manually written markup.
Try Canvas Builder →