VOOZH about

URL: https://www.geeksforgeeks.org/css/css-border-top-left-radius-property/

⇱ CSS border-top-left-radius Property - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

CSS border-top-left-radius Property

Last Updated : 26 Aug, 2024

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"

Output: 

👁 Image

Example 2: Using "percentage"

Output: 

👁 Image

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
Comment
Article Tags: