CSS border-top-left-radius Property


The border-top-left-radius CSS property is used to control the curvature of the top-left corner of an element's border. It allows you to create rounded corners by specifying a radius value, which determines the degree of curvature. This property is commonly used in conjunction with the "border-radius" property to control the rounding of all four corners of an element, providing a way to create visually appealing and smooth edges for elements like buttons, containers, and images in web design.

Initial value
Applies to
All elements
Computed value
Two absolute [length] or percentages
JavaScript syntax

Interactive Demo

Demo of the border top left radius property.


border-top-left-radius: [ <length> | <percentage> ]{1,2} 


  • <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.


<div class="border">This is an example of the border-top-left-radius property using a red solid border 2px in width and a 10px radius.</div>
.border {
   border: 2px solid red;
   border-top-left-radius: 10px;
   margin: 20px;
   padding: 20px;

Browser Support

The following table will show you the current browser support for the CSS border-top-left-radius property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 31st December 2023