Skip to content
Related Articles

Related Articles

CSS | border-top-left-radius Property

View Discussion
Improve Article
Save Article
  • Last Updated : 02 Aug, 2022

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: 

ValueFunctionality
lengthUsed to specify the radius in terms of numerical value.
percentageUsed to specify the radius in terms of percentage.
initialUsed to initialize the property to it’s initial value.
inheritUsed 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(
            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(
            padding: 100px;
            border-top-left-radius: 60%;
        }
    </style>
</head>
 
<body>
    <div class="gfg">
    </div>
</body>
 
</html>

Output: 

Supported Browsers: The browser supported by CSS | border-top-left-radius Property are listed below: 

  • Chrome 4.0 and above
  • Edge 12.0 and above
  • Firefox 4.0 and above
  • Internet Explorer 9.0 and above
  • Opera 10.5 and above
  • Safari 5.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!