CSS border-bottom-left-radius Property

The CSS property border-bottom-left-radius controls the curvature of the box’s bottom-left corner, determining how that corner is clipped and rendered. Visually, it replaces the sharp right angle with a rounded quadrant or elliptical arc, so the outer shape of the element appears softer at that corner. Because it targets a single corner, it’s commonly used when you want asymmetric rounding (for example rounding only one corner of a card or button) without affecting the other corners.

Geometry-wise, the corner can form a circular or elliptical arc by combining horizontal and vertical curvature, so the final shape depends on both axes of the box at that corner. When multiple corner properties are present they compose together to form the element’s overall rounded outline; the shorthand border-radius can be used to coordinate or override individual-corner radii, but the per-corner property gives precise control when only one corner should differ from the rest. The rendering of adjacent corners and how radii meet at edges is handled by the browser’s rounding algorithm so that radii don’t visually overlap in unexpected ways.

The property affects both the background and the border region of the element: the element’s background is clipped to the rounded outline unless a different clipping rule is applied via background-clip, and the element’s border follows the same curvature so the stroke hugs the rounded corner consistently. If your element has a visible border, the border’s corner arc will mirror the corner radius, producing a continuous rounded frame rather than a jagged intersection; the generic border settings (width, style, color) will still apply along that curved path.

In layout and rendering terms, the rounded corner affects hit-testing and visual overflow: content that would otherwise extend into the discarded corner area is clipped, which interacts with scrollable regions and stacking contexts (see overflow). On some elements and in certain compositing scenarios, antialiasing and subpixel rendering can cause hairline artifacts around the rounded edge; transforms, masks, and compositing may also change how the corner is rasterized. In short, border-bottom-left-radius is a precise tool for shaping one corner of a box and works together with background, border, and layout behaviors to produce the final visual and interactive result.