Skip to content
Related Articles

Related Articles

Improve Article

CSS | border-top-left-radius Property

  • Last Updated : 08 Aug, 2019

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;

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”.






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




<!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:

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

  • Chrome: 5.0, 4.0 -webkit-
  • Edge: 9.0
  • FireFox: 4.0, 3.0 -moz-
  • Opera: 10.5
  • Safari: 5.0, 3.1 -webkit-



My Personal Notes arrow_drop_up
Recommended Articles
Page :