W3docs
en
Log in

CSS border-top-left-radius Property

The border-top-left-radius is a CSS property which defines the shape of the top left corner of the element. Find some examples here.

The CSS border-top-left-radius specifies the rounding of the top left corner of the element.

The border-top-left-radius property is one of the CSS3 properties.

The corner can be rounded into a circle or an ellipse, or remain square if no value is specified. If you use a background image or color, it will be clipped to the border shape. The clipping behavior is controlled by the background-clip property.

The border-top-left-radius property accepts one or two values, each specified as a <length> or <percentage>. When only one value is used, it sets both the horizontal and vertical radii of the ellipse. When two values are used, the first sets the horizontal radius and the second sets the vertical radius. Percentages for the horizontal radius refer to the element's width, while percentages for the vertical radius refer to its height. Negative values are invalid.

Initial Value0
Applies toAll elements. It also applies to ::first-letter.
InheritedNo
AnimatableYes. The radius of the border is animatable.
VersionCSS3
DOM Syntaxobject.style.borderTopLeftRadius = "25px";

Syntax

Syntax of CSS border-top-left-radius Property

border-top-left-radius: length | % | initial | inherit;

Here is an example of border-top-left-radius where only one value is used. When only one value is used, it sets both the horizontal and vertical radii of the ellipse.

Example of the border-top-left-radius property:

Example of CSS border-top-left-radius Property with only one value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        height: 40px;
        background: #8ebf42;
        border: 4px solid #000000;
        border-top-left-radius: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-left-radius example.</h2>
    <div></div>
  </body>
</html>
Try it Yourself »

Result

CSS border-top-left-radius property

In the following example, the first value sets the horizontal radius and the second sets the vertical radius.

Example of the border-top-left-radius property with two values:

Example of CSS border-top-left-radius Property with two values

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        height: 40px;
        background: #ccc;
        border: 4px solid #000000;
        border-top-left-radius: 50px 25px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-left-radius example.</h2>
    <div></div>
  </body>
</html>
Try it Yourself »

The following example uses percentage values. The first value defines the horizontal radius, and the second defines the vertical radius.

Example of the border-top-left-radius property with the "%" value:

Example of CSS border-top-left-radius Property with percentage value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        height: 40px;
        background: #eee;
        border: 4px solid #000000;
        border-top-left-radius: 50% 60%;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-left-radius example.</h2>
    <div></div>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
lengthDefines the rounding of the top-left corner.Play it »
%Defines the rounding of the top-left corner in percentage.Play it »
initialSets the property to its default value.Play it »
inheritInherits the property from its parent element.

Practice

Practice

What does the 'border-top-left-radius' property in CSS do?