CSS border-top-left-radius (Set/Change Radius of Top Left Border)

The CSS border-top-left-radius property is used when need to specify the radius of the top left corner of the border. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {border: 10px solid maroon; padding: 12px; border-top-left-radius: 20px;}
      p {border: 4px solid mediumvioletred; border-top-left-radius: 10px;}
   </style>
</head>
<body>

   <h2>The border-top-left-radius Property</h2>
   <p>This is a para.</p>
   
</body>
</html>

Output

The border-top-left-radius Property

This is a para.

CSS border-top-left-radius Syntax

The syntax of border-top-left-radius property in CSS, is:

border-top-left-radius: x;

The value of x should be any of the following:

length - used to define the radius using length
% - used to define the radius in percentage
initial - used to define the radius using default value
inherit - used to inherit and define the value from its parent

CSS border-top-left-radius with Two Values

If two values are given to border-top-left-radius, then the first value applies to top border, whereas the second value applies to left border. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 22px solid mediumvioletred; padding: 10px; border-top-left-radius: 10px 30px;}
   </style>
</head>
<body>

   <p>This is a para.</p>
   
</body>
</html>

Output

This is a para.

CSS Online Test

« Previous Tutorial Next Tutorial »