CSS Reference Manual
CSS Attributes

The best CSS3 border-top-left-radius property Tutorial In 2024, In this tutorial you can learn Examples,Browser Support,Attribute definitions and instructions,grammar,related articles,

CSS3 border-top-left-radius property

Previous: CSS3 border-top-right- radius property

Next: CSS3 border-radius property

Examples

Add a border to the top left corner of the div element:

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

Browser Support

Figures in the table represent the first browser to support the version number of the property.

Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.

属性
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

Attribute definitions and instructions

border-top-left-radius property defines the shape of the upper left corner of the border.

Note: This property allows you to add elements rounded borders!

Defaults:	0
inherit:	no
version:	CSS3
JavaScript syntax:	object object.style.borderTopLeftRadius = "5px"

grammar

border-top-left-radius:length|%[length|%];

Note: border-top-left - a length or two percentage radius property defines the shape of a quarter ellipse outer border edge corner.The first value is the horizontal radius and the second radius is vertical. If the second value is omitted, it is copied from the first one. If either of zero length, the corner is square, not round. The percentage of horizontal radius refers to the width of the bounding box, and the percentage of vertical radius refers to the height of the bounding box.

值	描述
length	定义左上角的形状。
%	使用%定义左上角的形状。

related articles

CSS3 tutorial: CSS3 Borders

Previous: CSS3 border-top-right- radius property

Next: CSS3 border-radius property

CSS3 border-top-left-radius property

10/30