CSS border-top-left-radius Property
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.w3wiki.net/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.w3wiki.net/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
Contact Us