In this CSS tutorial, we will be going to explore the border-radius property and its accepted values. We will see how this property can be used while styling an element and what other properties are associated with it.
CSS border-radius Property
The border-radius property defines the radius of the elements border’s corners. Using this property, we can also round the corner of an image.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-radius: 25px;
border: 2px solid green;
background-color: lightblue;
padding: 30px;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<p>Border Corners are rounded</p>
</body>
</html>
Round Specific Corner
There are 4 other properties associated with the border-radius property, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. With the help of these properties we can style specific border corners.
Example
Round only the top border corners
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border: 2px solid green;
background-color: lightblue;
padding: 30px;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<p>Top Border Corners are rounded</p>
</body>
</html>
Using Shorthand border-radius property
Instead of using border-top-left-radius or border-top-right-radius, we can use the shorthand border-radius property. Using this property with a single statement we can define different radius for every corner. The shorthand border-radius property can accept 4 values at once which represent all the four corners.
Syntax:
selector{ border-radius: top-left top-right bottom-right bottom-left}
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{ /* top-left= 25px top-right = 0px bottom-left=50px bottom-right=40px */
border-radius: 25px 0px 40px 50px;
border: 2px solid green;
background-color: lightblue;
padding: 30px;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<p>Border Corners are rounded</p>
</body>
</html>
Summary
- The CSS border-radius property makes the border corners rounded.
- It accepts values in length units.
- There are 4 child properties associated with border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius