Open In App
Related Articles

CSS border-top-left-radius Property

Improve Article
Improve
Save Article
Save
Like Article
Like

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(
            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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 02 Jun, 2023
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials