CSS border-top-left-radius property

Definition and usage

The border-top-left-radius attribute defines the shape of the border corner at the top left.

Tip:This property allows you to add rounded border corners to the element.

See also:

CSS3 Tutorial:CSS3 Borders

Example

Add rounded border corners to the top left corner of the div element:

div
{
border:2px solid;
border-top-left-radius:2em;
}

Try it yourself

CSS syntax

border-bottom-right-radius: length|% [length|%];

Note:The length value and percentage value of the border-top-left-radius attribute define the radius (radii) of a quarter ellipse (defining the shape of the corner of the external border edge). The first value is the horizontal radius, and the second value is the vertical radius. If the second value is omitted, the first value is copied. If the length is zero, the corner is square rather than round. The percentage value of the horizontal radius refers to the width of the border box, and the percentage value of the vertical radius refers to the height of the border box.

Attribute value

Value Description Test
length Define the shape of the lower left corner. Test
% Define the shape of the lower left corner with a percentage value. Test

Technical details

Default value: 0
Inheritance: no
Version: CSS3
JavaScript syntax: object.style.borderTopLeftRadius="5px"

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5