CSS border-top-left-radius Property

CSS border-top-left-radius defines the rounding of the top left corner of the element. There are three kind of rounding. It can be a circle or an ellipse or do not use any value, the corner is square. If you use background image or color, it will be clipped off at the border. The process of clipping is defined by the value of background-clip property.

CSS border-top-left-radius property is defined by two values: length and percentage. When only one value is used, that value specifies both horizontal and vertical radii of the ellipse. If you use two values, the first value sets the horizontal radius and the second value sets the vertical radius.

Percentages for the horizontal radius refer to the width of the box, percentages for the vertical radius refer to the height of the box. Negative values are invalid.

Initial Value 0
Applies to All elements. It also applies to ::first-letter.
Inherited No
Animatable Yes. The radius of the border is animatable.
Version CSS1
DOM Syntax object.style.borderTopLeftRadius = "25px";

Syntax

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

Here is an examples of border-top-left-radius where only one value is used. When you give only one value, that value specifies both top border and left border of the ellipse.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      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>

Another example with two values. The first value is for the top border, and the second one for the left border.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div{
      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>

Let’s define the shape of the box in percentages. Here, also, the first value defines the horizontal radii of the ellipse, the second value defines the vertical radii of the ellipse.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div{
      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>

Values

Value Description
length Defines the rounding of the top-left corner.
% Defines the rounding of the top-left corner in percentage.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Related Resources

Border, border-radius, border-top, border-bottom, border-left, border-right, border-bottom-right-radius, border-bottom-left-radius, border-top-right-radius, background-clip.

Browser support

4.0+ 9.0+ 12.0+ 4.0+ 5.0+ 10.5+




Related articles