CSS border-bottom-right-radius Property

The border-bottom-right-radius CSS property controls the curvature applied to the lower-right corner of a box, letting that single corner be rounded independently of the others. It determines the shape of the corner in the painting phase so the outline of the element (its visible frame and the edge of backgrounds and borders) follows a smooth curve instead of a sharp 90° angle. Because it targets only one corner, it is especially useful when you need asymmetrical shapes - for example a card with one softened corner, a speech-bubble tail, or a dialog with a single rounded corner for stylistic emphasis.

When you round a corner, several painting layers are affected. The element’s border follows the same curvature, and the background is clipped to the rounded outline unless background painting is configured otherwise; this interaction is often considered alongside background-clip. Shadows cast by the element also visually respect the rounded edge, so effects produced with box-shadow will appear soft and continuous around that corner rather than abruptly cut off. If the rounded corner is large relative to the element size, the rendering engine may alter how adjacent corners interact to avoid impossible geometries, so visual results can depend on the combined radii of multiple corners.

Layout and hit testing also reflect the rounded outline: pointer events and focus rings are typically constrained to the element’s painted shape, which means the rounded corner can change the clickable area and the visible focus region. Overflowing child content and backgrounds are masked by the corner curve, so when content extends into a rounded corner it can be visually clipped; designers sometimes pair rounded corners with settings like overflow to control how clipped content behaves and whether scrollbars appear inside the rounded region.

In practice, using the property lets you produce subtle visual cues and guide user attention - single-corner rounding reads differently than uniform rounding and can help convey hierarchy or affordance. It’s commonly used alongside the shorthand border-radius when you want most corners to share a default radius but need one corner treated separately. Keep in mind that the final visual output is a combination of border, background, shadow, and clipping behavior, so testing across varied sizes and content will ensure the rounded corner behaves as you intend.