CSS border-top-left-radius Property
CSS border-top-left-radius property is used to set the radius for top-left corner of the HTML Element(s).
border-top-left-radius property can be used to create a rounded corner to the HTML element.
border-top-left-radius can be set with the following values.
- CSS length [Refer CSS Length Units]
- Percentage
- initial
- inherit
Note: border has to be set for the HTML Element(s) to let border-top-left-radius make the effect on the HTML element(s).
border-top-left-radius in Length Units
In the following example, we set border-top-left-radius with 20px.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#div1 {
border: 5px solid;
border-top-left-radius: 50px;
width: 100px;
height: 100px;
background: lightcoral;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>border-top-left-radius in Percentage
In the following example, we take two div elements. We set border-top-left-radius with 50% for both the divs.
Using second div, we demonstrate how percentage values work for border-top-left-radius when length and width are different. The specified percentage of the width and length are considered for the corner radius.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
border: 5px solid;
height: 100px;
display: inline-block;
margin: 10px;
}
#div1 {
border-top-left-radius: 50%;
width: 100px;
background: #d2ff8a;
}
#div2 {
border-top-left-radius: 50%;
width: 200px;
background: #ff6347;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>border-top-left-radius: initial or inherit
initial sets the border-top-left-radius with its default value of 0.
inherit sets the border-top-left-radius with that of its parent.
Conclusion
In this CSS Tutorial, we learned about border-top-left-radius property, and how to use this property for HTML Elements, with examples.