CSS border-radius Property
CSS border-radius property sets the corner radius for element.
border-radius for the four corners can be specified in different ways. We shall go through each of them with examples.
border-radius with four values
border-radius: 5px 25px 45px 65px;
where the order of corner radii is top-left, top-right, bottom-right, and bottom-left respectively, as shown in the following.
border-radius: 5px 25px 45px 65px;
/* top-left top-right bottom-right bottom-left */
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#div1 {
background: #ffaa54;
width: 200px;
height: 200px;
border-radius: 5px 25px 45px 65px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
If border is specified , then the border also gets the radius applied.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#div1 {
background: #ffaa54;
width: 200px;
height: 200px;
border: 5px solid;
border-radius: 5px 25px 45px 65px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
border-radius with three values
border-radius: 5px 25px 45px;
where the order of corners is top-left, top-right, and bottom-right respectively. For bottom-left, the value for top-right is considered, as shown in the following.
border-radius: 5px 25px 45px;
/* top-left top-right bottom-right */
/* bottom-left */
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#div1 {
background: #ffaa54;
width: 200px;
height: 200px;
border-radius: 5px 25px 45px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
border-radius with two values
border-radius: 15px 55px;
where the first value is for top-left, and bottom-right; and the second value is for top-right, and bottom-left respectively, as shown in the following.
border-radius: 15px 55px;
/* top-left top-right */
/* bottom-right bottom-left */
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#div1 {
background: #ffaa54;
width: 200px;
height: 200px;
border-radius: 15px 55px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
border-radius with one value
border-radius: 25px;
where the specified value is set as radii for all corners: top-left, top-right, bottom-right, and bottom-left, as shown in the following.
border-radius: 25px;
/* top-left */
/* top-right */
/* bottom-right */
/* bottom-left */
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#div1 {
background: #ffaa54;
width: 200px;
height: 200px;
border-radius: 25px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
Two border-radius values for one corner
We can also specify two radius values for a corner. As a result, we have an angularly asymmetric corner.
border-radius: 25px / 50px;
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#div1 {
background: #ffaa54;
width: 200px;
height: 200px;
border-radius: 25px / 50px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
Conclusion
In this CSS Tutorial, we learned about border-radius property, and how to use this property for HTML Elements, with examples.