The **`border-top-left-radius`** property in #key# CSS: Cascade Style Sheets #key# is used to set or define the *radius* of the *top left corner* of the border. 

#     
## Syntax

---
```css
border-top-left-radius: length|percentage [length|percentage]|initial|inherit;
```

## Property values

- `length`: Sets or defines the left-corner shape. 
 
- `percentage`: Writes the shape of the top left corner in percentage. 

- `initial`: Sets the value to its default value.

- `inherit`: Inherits property from its parent value.

#      
## Code

The basic #key# HTML: HyperText Markup Language #key# & CSS code to demonstrate the use of the `border-top-left-radius` property is below.

<div class="container">
  <p>Welcome To Edpresso Shots</p>
  <div class="element elem1">Circular Corner</div>    
  <div class="element elem2">Eliptical Corner</div>
</div>

//Defining the properties of the box
body {
  background-color: #7ec1ee;
  color: #555;
  font-size: 2em;
}

.container {
  width: 90%;
}

.element {
  background-color: #0099cc;
  color: white;
  margin: 30px;
  float: left;
  width: 100px;
  height: 100px;
  padding: 30px;
}

//Here we are defining the circular corner
.elem1 {
  border-top-left-radius: 60px;
}

//Here we are defining the elliptical corner
.elem2 {
  border-top-left-radius: 150px 75px;
}

codemirror

#      
## Explanation

In this example, we make two boxes.

The corner of one box is round, and the corner of the second box is an elliptical shape. 

What is the CSS border-top-left-radius property?

Defines the radius of the top left corner of a border using length, percentage, or inherit values.