HTML Dog
Skip to navigation

CSS Property: border-top-left-radius

Rounded top-left corners.

Specifies the radius of a quarter circle or ellipse that forms the top-left corner of the outer-edge of the border area of a box. It is a general corner-rounding property and does not actually require a border for it to take effect.

Top-left corner is cut around the top-left quarter of a circle (or ellipse) with the specified radius.

Possible Values

ValueNoteExample
[length]Circle radius.1em
[percentage]Ellipse radius. Horizontal radius is calculated as a percentage of the border box’s width. Vertical radius is calculated as a percentage of the border box’s height.50%
[value] [value]Ellipse radii. First value is the horizontal radius. Second value is the vertical radius.10px 20px
inherit
initial
unset

Example


.box1 { border-top-left-radius: 10px; }
/* Top-left corner has rounding made from a circle with a radius of 10 pixels. */

.box2 { border-top-left-radius: 10px 20px; }
/* Top-left corner has rounding made from an ellipse with a horizontal radius of 10 pixels and vertical radius of 20 pixels. */

Browser support

Can I Use border-radius? Data on support for the border-radius feature across the major browsers from caniuse.com.