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".
<!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".
<!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>
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
