Style borderTopLeftRadiusProperty
Style ObjectExamples
Add a rounded border to the top-left corner of a div element:
Try it Yourself »
Definition and Usage
The borderTopLeftRadius property sets or returns the shape of the top-left corner border.
Tip:This property allows you to add rounded borders to elements!
Browser Support
IE9+, Firefox, Chrome, Safari, and Opera support the borderTopLeftRadius property.
Syntax
Return the borderTopLeftRadius property:
Set the borderTopLeftRadius property:
Note:The two length or percentage values of border-top-left-radius define the radius of a quarter ellipse, that is, the shape of the corner of the outer 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 both lengths are 0, the corner is square, not round. Percentages for the horizontal radius are relative to the width of the border box, while percentages for the vertical radius are relative to the height of the border box.
Property Values
| Value | Description |
|---|---|
| length | Defines the shape of the top-left corner. |
| % | Defines the shape of the top-left corner in %. |
| initial | Sets this property to its default value. Seeinitial。 |
| inherit | Inherits this property from its parent element. Seeinherit。 |
Technical Details
| Default value: | 0 |
|---|---|
| Return value: | A string representing the element's border-top-left-radius property. |
| CSS Version | CSS3 |
Related Articles
CSS Reference Manual:border-top-left-radius property
Other Extensions