border-top-left-radius#

#Introduction

The border-top-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

#Examples

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

Preview

#Syntax

/* the corner is a circle */
/* border-top-left-radius: radius */
border-top-left-radius: 3px;

/* Percentage values */

/* circle if box is a square or ellipse if box is a rectangle */
border-top-left-radius: 20%;

/* same as above: 20% of horizontal(width) and vertical(height) */
border-top-left-radius: 20% 20%;

/* 20% of horizontal(width) and 10% of vertical(height) */
border-top-left-radius: 20% 10%;

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

With one value:

• the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner.

With two values:

• the first value is a <length> or a <percentage> denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
• the second value is a <length> or a <percentage> denoting the vertical semi-major axis of the ellipse to use for the border in that corner.

#Values

<length-percentage>

Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS <length> data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

#Formal definition

#Formal syntax

border-top-left-radius =
  <length-percentage [0,∞]>{1,2}

<length-percentage> =
  <length>      |
  <percentage>

Examples:

/* the corner is a circle */
/* border-top-left-radius: radius */
border-top-left-radius: 3px;

/* the corner is an ellipsis */
/* border-top-left-radius: horizontal vertical */
border-top-left-radius: 0.5em 1em;

#Difference from Web

• mdn:border-top-left-radius

Global values are not supported, (inherit, initial, revert, unset, etc).

#Compatibility

LCD tables only load in the browser