CSS Properties: CSS Border Radius
CSS border-radius is a property that sets the rounded borders and provides rounded corners around elements, tags, or divs. Simply put, it helps to define the radius of the corners of an element, giving it a rounded shape to the corners of the border.
The border for all four corners of the box can be specified in a single declaration using the border radius. The four border-radius corners include border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. Its values are defined in percentage or length units.
Below is a list of the properties included in this property, along with their descriptions:
| Property | Description |
| border-top-left-radius | For the top-left corner of a page, this parameter specifies the border-radius |
| border-top-right-radius | For the top-right corner of a page, this parameter specifies the border-radius |
| border-bottom-right-radius | For the bottom-right corner of a page, this parameter specifies the border-radius |
| border-bottom-left-radius | For the bottom-left corner of a page, this parameter specifies the border-radius |
When the bottom-left value is absent, the top-right will be like it. If the value of the bottom-right is removed, the top-left will also be. Also, when the top-right is eliminated, the top-left will remain the same.
Listed below is what happens when we provide various value quantities to this property.
- If this property provides a single value (such as border-radius: 50px;)), it will set all corners to the same value.
- When two values are provided (such as border radius: 20% 10%), both top-left and bottom-right corners won't be affected, while top-right and bottom-left corners will be affected.
- When three values are provided (such as border-radius: 10%, 30%, 20%;), the first value will apply to the top-left corner, then the second value will apply to the top-right, bottom-left, and bottom-right corners, and the third value will apply to the bottom-right corner.
- Lastly, when four values are provided (border radius: 10% 30% 20% 40%;), the first value is applied to the top-left, the second value to the top-right, and the third value to the bottom-left, and the fourth value to the bottom-left, respectively.
Length and Percentage; Property Values
Length defines the shape of the corners. Length values indicate the radius size. It has a default value of 0 and does not allow negative values.
Percentage describes the size of the radius in percentage. Similar to the length, it does not allow negative values.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS border-radius example </title>
<style>
div {
padding: 40px;
margin: 15px;
border: 5px ridge red;
width: 250px;
float: left;
height: 200px;
}
p{
font-size: 20px;
}
#one {
border-radius: 100px;
background: green;
}
#two {
border-radius: 20% 10%;
background: blue;
}
#three {
border-radius: 40px 10em 10%;
background: cyan;
}
#four {
border-radius: 50px 50% 50cm 50em;
background: lightgreen;
}
</style>
</head>
<body>
<div id = "one">
<h2> Good morning everyone</h2>
<p> border-radius: 90px; </p>
</div>
<div id = "two">
<h2> Good morning everyone </h2>
<p> border-radius: 25% 10%; </p>
</div>
<div id = "three">
<h2> Good morning everyone </h2>
<p> border-radius: 35px 10em 10%; </p>
</div>
<div id = "four">
<h2>Good morning everyone</h2>
<p>border-radius: 50px 50% 50cm 50em;</p>
</div>
</body>
</html>
Here's a look at the border-radius for each corner.
Example- border-top-left-radius
This is setting the border radius for the top-left corner.
<!DOCTYPE html>
<html>
<head>
<title> CSS border-radius top-left </title>
<style>
#left {
border-top-left-radius: 250px;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<div id = "left">
<h2>Good morning everyone</h2>
<p>border-top-left-radius: 250px;</p>
</div>
</center>
</body>
</html>
Example- border-top-right-radius
This is setting the border-radius for the top-right corner.
<!DOCTYPE html>
<html>
<head>
<style>
#left {
border-top-right-radius: 50%;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<div id = "left">
<h2>Good morning everyone</h2>
<p>border-top-right-radius: 50%;</p>
</div>
</center>
</body>
</html>
Example- CSS Border Radius border-bottom-right-radius
This is setting the border-radius for the bottom-right corner.
<!DOCTYPE html>
<html>
<head>
<style>
#left {
border-bottom-right-radius: 50%;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<div id = "left">
<h2>Good morning everyone</h2>
<p>border-bottom-right-radius: 50%;</p>
</div>
</center>
</body>
</html>
Example- border-bottom-left-radius
This is setting the border-radius for the bottom-left corner.
<!DOCTYPE html>
<html>
<head>
<style>
#left {
border-bottom-left-radius: 50%;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<div id = "left">
<h2>Good morning everyone</h2>
<p>border-bottom-left-radius: 50%;</p>
</div>
</center>
</body>
</html>
YOU SHOULD KNOW THAT;
Horizontal and vertical values are defined using the slash (/) symbol. Horizontal radius values are used before the slash (/) and vertical radius values are used after the slash (/).
Here is an example using the slash (/) symbol.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div{
padding: 50px;
border: 6px ridge red;
width: 300px;
margin: 20px;
font-weight: bold;
height: 175px;
float: left;
font-size: 25px;
}
#one {
border-radius: 10% / 50%;
background: lightgreen;
}
#two {
border-radius: 120px / 100px 10px;
background: lightblue;
}
#three {
border-radius: 50% 10em / 10% 20em;
background: lightpink;
}
#four {
border-radius: 100px 10em 120px / 30%;
background: cyan;
}
</style>
</head>
<body>
<center>
<div id = "one">
<h2>Good morning everyone</h2>
<p>border-radius: 10% / 50%; </p>
</div>
<div id = "two">
<h2>Good morning everyone</h2>
<p>border-radius: 120px / 100px 10px; </p>
</div>
<div id = "three">
<h2>Good morning everyone</h2>
<p>border-radius: 50% 10em / 10% 20em; </p>
</div>
<div id = "four">
<h2>Good morning everyone</h2>
<p>border-radius: 100px 10em 120px / 30%; </p>
</div>
</center>
</body>
</html>
Example
