The border-top-left-radius property sets the rounding of the top-right corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

  • Initial value0
  • Applies toAll elements
  • InheritedNo
  • MediaVisual
  • Computed valueTwo absolute [length] or percentages
  • AnimatableYes
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.borderTopLeftRadius
Formal syntax: [ <length> | <percentage> ]{1,2} 

border-top-left-radius: 5px;
border-top-left-radius: 2%;
border-top-left-radius: 5px 10px;
  • <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 axe refer to the width of the box, percentages for the vertical axe refer to the height of the box. Negative values are invalid.
.class {
   border-top-left-radius: 2em; 
}

Click the button below to experiment with this property.

Give it a Try!

4+Firefox9+Explorer4+Chrome5+Safari10.5+Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.