Glossary

What Is CSS border-radius Property?

The CSS `border-radius` property rounds the corners of an element's outer border edge by defining the radii of elliptical or circular corner curves, as specified in the CSS Backgrounds and Borders Module Level 3 (W3C). It is a shorthand property that controls up to four individual corner radii — `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, and `border-bottom-left-radius` — and supports both single-radius (circular) and dual-radius (elliptical) values. Unlike older hacks using background images or nested elements, `border-radius` achieves corner rounding purely in CSS without affecting the element's document flow or box model dimensions.

What Is CSS border-radius Property?

How CSS border-radius Property Works

At the browser rendering level, `border-radius` instructs the painting engine to clip the corner regions of an element's background, border, and box-shadow using a quarter-ellipse curve. The browser calculates the curve using two radii: horizontal (x-axis) and vertical (y-axis). When you provide a single value like `border-radius: 12px`, both radii are equal, producing a circular arc. When you use the slash syntax — `border-radius: 20px / 10px` — the first value sets the horizontal radius and the second sets the vertical radius, creating an elliptical corner curve. The shorthand `border-radius` follows a specific value order: top-left, top-right, bottom-right, bottom-left — the same clockwise pattern used by `margin` and `padding`. When fewer than four values are supplied, the browser applies CSS shorthand inference rules: one value applies to all corners, two values apply top-left/bottom-right and top-right/bottom-left respectively, and three values apply top-left, top-right/bottom-left, and bottom-right. This mirrors the behavior defined in the CSS Backgrounds and Borders Module Level 3 specification (https://www.w3.org/TR/css-backgrounds-3/). Border radius interacts with the CSS box model in important ways. It clips the `background-color` and `background-image` of the element (controlled by `background-clip`), clips the `border` rendering itself, and also clips the `box-shadow` spread if the shadow is inset. Crucially, `border-radius` does not clip child elements — for that, you must also apply `overflow: hidden` to the parent. This is a common source of bugs when developers expect child images or divs to be clipped by the parent's rounded corners. Browser support for `border-radius` is universal across all modern browsers and has been since IE9+ without vendor prefixes. The `-webkit-border-radius` prefix was required for Safari 4 and Chrome 3 but is now obsolete. A special case worth knowing: setting `border-radius: 50%` on an element with equal width and height produces a perfect circle, because 50% of each dimension meets at the center. On elements with unequal dimensions, `50%` produces an ellipse. The `border-radius` property also participates in CSS transitions and animations — corners can be smoothly interpolated between two radius values, enabling techniques like morphing shapes on hover.

Best Practices for CSS border-radius Property

Use percentage-based values (`border-radius: 50%`) for shape-dependent elements like avatars and icon containers where the element's dimensions may change, since percentages adapt automatically — fixed pixel values will produce incorrect ellipses on non-square elements. Apply `overflow: hidden` alongside `border-radius` on any container that holds child elements (particularly `<img>` tags) you want visually clipped, since `border-radius` alone does not clip children and will produce visible overflow corners. Leverage the longhand individual corner properties (`border-top-left-radius`, etc.) when you need asymmetric rounding — for example, pill-shaped tabs that are only rounded on top — rather than overriding shorthand values, which improves code clarity and avoids shorthand inference bugs. Avoid applying large `border-radius` values to elements with complex `box-shadow` or `border` styles on low-powered mobile devices without testing, as painting rounded corners with multiple visual layers can trigger GPU compositing and increase paint time; keep radius values consistent across a design system using CSS custom properties (e.g., `--radius-card: 12px`) so changes propagate site-wide from a single source of truth.

CSS border-radius Property & Canvas Builder

Canvas Builder generates Bootstrap 5 HTML output that leverages the full Bootstrap border-radius utility system, applying classes like `.rounded-3` or `.rounded-circle` directly on semantic elements — `<img>`, `<div>`, `<button>` — rather than scattering inline `border-radius` styles throughout the markup, which would make design-system-level changes difficult. The clean, class-based HTML that Canvas Builder produces means developers can customize the global radius scale by overriding Bootstrap's `--bs-border-radius` CSS custom properties or Sass variables, instantly propagating changes across every card, badge, modal, and avatar in the generated site. Because Canvas Builder outputs valid, standards-compliant HTML without presentational div-soup or legacy hacks, `border-radius` behaves predictably across the generated components with no browser-specific workarounds needed.

Try Canvas Builder →

Frequently Asked Questions

Why does `border-radius` not clip my child `<img>` element even though the parent has rounded corners?

The `border-radius` property only clips the parent element's own background, border, and box-shadow rendering — it does not establish a clipping region for child content. To clip children, you must add `overflow: hidden` (or `overflow: clip` in modern browsers) to the parent element alongside `border-radius`. Note that `overflow: hidden` also creates a new block formatting context, which can affect how floats and margins collapse inside the container.

What is the difference between `border-radius: 50%` and `border-radius: 50vw` for creating pill shapes?

Using `border-radius: 50%` on a wide, short element (like a button) creates an ellipse rather than a pill, because 50% of a 200px-wide, 40px-tall element gives radii of 100px horizontally and 20px vertically. To reliably create pill shapes regardless of element dimensions, use a large fixed value like `border-radius: 9999px` or `border-radius: 50vw` — these values exceed any possible element dimension, so the browser clamps them to produce true semicircular ends, which is the technique Bootstrap 5's `.rounded-pill` class uses (`border-radius: 50rem`).

How does Canvas Builder handle `border-radius` in its generated HTML and CSS output?

Canvas Builder generates clean, production-ready HTML built on Bootstrap 5, which includes a fully configured border-radius utility system with classes like `.rounded`, `.rounded-circle`, `.rounded-pill`, and the numeric scale `.rounded-1` through `.rounded-5`. When you design components in Canvas Builder — such as cards, buttons, or image containers — the AI applies semantically appropriate Bootstrap radius classes directly in the markup rather than inline styles, keeping your CSS maintainable and consistent with Bootstrap's design token system. This means you can globally restyle all rounded elements by overriding Bootstrap's `$border-radius` Sass variables without touching individual components.