CSS - border-top-left-radius Property

Quiz

CSS border-top-left-radius property controls the roundness of the top-left corner of an element's border.

Syntax

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

Property Values

Value	Description
length	It defines the roundness of the top-left border using length values.
percentage	It defines the roundness of the top-left border using percentage values.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Border Top Left Radius Property

The following examples explain the border-top-left-radius property with different values.

Border Top Left Property with Length Values

To set the roundness of the top left border, we can specify the radius in length values (e.g. 10px, 15px 20px etc.).Single value applies to both top and left border, with two values, the first value is applied to top border and second value to left border. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-border {
         background-color: lightgreen;
         text-align: center;
         padding: 10px;
         border: 3px solid blue;
         width: 200px;
         height: 200px;
      }

      .box1 {
         border-top-left-radius: 50px;
      }

      .box2 {
         border-top-left-radius: 70px 80px;
      }
   </style>
</head>

<body>
   <h2>
      CSS boder-top-left-radius property
   </h2>
   <h3>
      Single Value: 50px (applies to both top and left borders)
   </h3>
   <div class="rounded-border box1">
      <p>top-left rounded corner.</p>
   </div>
   <h3>
      Two Values: 70px 80px (70px applies to top border
      and 80px applies to left border)
   </h3>
   <div class="rounded-border box2">
      <p>top-left rounded corner.</p>
   </div>
</body>

</html>

Border Top Left Property with Percentage Values

To set the roundness of the top left border, we can specify the radius in percentage values (e.g. 10%, 15% 20% etc.).Single value applies to both top and left border, with two values, the first value is applied to top border and second value to left border. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-border {
         background-color: lightgreen;
         text-align: center;
         padding: 10px;
         border: 3px solid blue;
         width: 200px;
         height: 200px;
      }

      .box1 {
         border-top-left-radius: 30%;
      }

      .box2 {
         border-top-left-radius: 30% 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS boder-top-left-radius property
   </h2>
   <h3>
      Single Value: 30% (applies to both top and left borders)
   </h3>
   <div class="rounded-border box1">
      <p>top-left rounded corner.</p>
   </div>
   <h3>
      Two Values: 30% 50% (30% applies to top border
      and 50% applies to left border)
   </h3>
   <div class="rounded-border box2">
      <p>top-left rounded corner.</p>
   </div>
</body>

</html>

Supported Browsers

Property
border-top-left-radius	5.0	9.0	4.0	5.0	10.5

css_reference.htm

Print Page