border-top-left-radius property
Sets or retrieves one or two values that define the radii of the quarter ellipse that defines the shape of the upper-left corner for the outer border edge of the current box.
![]() ![]() |
Syntax
border-top-left-radius: [ length | percentage ]
{1,4}
Property values
One or two of either of the following radius values.
length-
Floating-point number, followed by a supported length unit.
percentage-
Integer, followed by a %. The value is a percentage of, for horizontal radii, the width of the border box, or, for vertical radii, the height of the border box.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value | 0 |
Standards information
- CSS Backgrounds and Borders Module Level 3, Section 5.1
Remarks
As of Microsoft Edge, "-webkit-border-top-left-radius" is supported as an alias for this property.
The border-top-left-radius property specifies the horizontal and vertical radii of the ellipse that defines the rounded upper-left corner for a border box. If there is only one value given, that value specifies both horizontal and vertical radii of the ellipse. If there are two values given, the first value sets the horizontal radius and the second value sets the vertical radius.
For more information about the border-*-*-radius properties, see How to Add Rounded Corners with CSS3.
See also
- CSSStyleDeclaration
- currentStyle
- defaults
- runtimeStyle
- style
- Demos
- IE Test Drive: Border Radius
- IE Test Drive: IE Logo
- Conceptual
- How to Add Rounded Corners with CSS3
- Internet Explorer 9 Guide for Developers: CSS3 Backgrounds and Borders Module
- Reference
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
- border-radius

