CSS border-top-left-radius Property

Last Updated : 02 Jun, 2023

In CSS the border-top-left-radius property is used to specify the radius of the top left corner of an element.

Note: The border rounding can be a circle or an ellipse depending on the value of the property. If the value is 0 then there is no change in the border, it remains a square border.

Syntax:

border-top-left-radius: value;

Default Value : It has a default value i.e 0

Property Values:

Value	Functionality
length	Used to specify the radius in terms of numerical value.
percentage	Used to specify the radius in terms of percentage.
initial	Used to initialize the property to it’s initial value.
inherit	Used to inherit the value from it’s parent element.

Example 1: Using “length”.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | border-top-left-radius Property 
    </title> 
    <style> 
        .gfg { 
            border: 2px solid black; 
            background: url( 
https://media.geeksforgeeks.org/wp-content/uploads/20190405121202/GfGLH.png); 
            padding: 100px; 
            border-top-left-radius: 75px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="gfg"> 
    </div> 
</body> 
  
</html> 

Output:

Example 2: Using “percentage”.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | border-top-left-radius Property 
    </title> 
    <style> 
        .gfg { 
            border: 2px solid black; 
            background: url( 
https://media.geeksforgeeks.org/wp-content/uploads/20190405121202/GfGLH.png); 
            padding: 100px; 
            border-top-left-radius: 60%; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="gfg"> 
    </div> 
</body> 
  
</html> 