This page is In Progress

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

border-top-left-radius

Summary

Sets the rounding of the top-left corner of the element.

Overview table

Initial value
0
Applies to
All elements
Inherited
No
Media
visual
Computed value
two absolute <length> or percentages
Animatable
Yes
CSS Object Model Property
borderTopLeftRadius
Percentages
Refer to the corresponding dimension of the border box

Syntax

  • border-top-left-radius: length
  • border-top-left-radius: percentage

Values

length
Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS <length> data types. Negative values are invalid.
percentage
Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

Examples


View live example

Notes

Remarks

  • 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.
  • When animating this property (as a length, percentage or calc()): when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.

Related specifications

CSS Backgrounds and Borders Module Level 3; 5.1. Curve Radii: the ‘border-radius’ properties
Candidate Recommendation
CSS Backgrounds and Borders Module Level 3; 5.1. Curve Radii: the ‘border-radius’ properties
Editor’s Draft

See also

Related articles

Border

Attributions