border-bottom-left-radius#

Introduction#

Used to add a rounded border to the bottom-left corner. The first value sets the horizontal radius, and the second value sets the vertical radius. If the second value is omitted, it copies the first value. A value of zero results in a square corner rather than a rounded one. The percentage value of the horizontal radius is relative to the border box width, while the percentage value of the vertical radius is relative to the border box height.

Usage Examples#

css-apisrc/border-bottom-left-radius/App.tsx

Preview

Syntax#

/* The corner is a circle */
/* border-bottom-left-radius: radius */
border-bottom-left-radius: 3px;

/* The corner is an ellipse */
/* border-bottom-left-radius: horizontal vertical */
border-bottom-left-radius: 0.5em 1em;

Values#

• <length> Defines the specific size of the border radius (default is 0).

• <percentage> Defines the border radius in percentage (horizontal radius is relative to the border box width, vertical radius is relative to the height).

Formal Definition#

Formal Syntax#

border-bottom-left-radius = <length-percentage>{1,2}
<length-percentage> = <length> | <percentage>

Differences from the Web#

• MDN Reference
• Does not support global values (inherit / initial / revert / unset).

Compatibility#