The CSS provides border-radius attribute in order to define, shape, round the corners of the HTML elements. This attribute is created in 2005 and gained widespread usage amongst web developers which provides easy styling for different elements.
border-radius Attribute
border-radius attribute is a very flexible attribute where it accepts different count of parameters. border-radius attribute can accept one two, three and four parameters where each of them has a different meaning.
Round with Single Value
We will start with a single value example where the provided value will be applied to all four corners. In this example, we will apply the border-radius as 15 pixels with 15 px like below.
<!DOCTYPE html>
<html>
<head>
<style>
#radius1 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius2 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius3 {
border-radius: 45px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The CSS border-radius Property</h1>
<p>One value - border-radius: 15px:</p>
<p id="radius1"></p>
<p>One value - border-radius: 25px:</p>
<p id="radius2"></p>
<p>One value - border-radius: 45px:</p>
<p id="radius3"></p>
</body>
</html>
Round with Two Value
We can also use two parameters here the first parameter is used for the top-left and bottom-right corners and the second value will be used for top-right and bottom-left corners.
<!DOCTYPE html>
<html>
<head>
<style>
#radius1 {
border-radius: 15px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius2 {
border-radius: 25px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius3 {
border-radius: 45px 90px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The CSS border-radius Property</h1>
<p>Two value - border-radius: 15px 30px:</p>
<p id="radius1"></p>
<p>Two value - border-radius: 25px 50px:</p>
<p id="radius2"></p>
<p>Two value - border-radius: 45px 90px:</p>
<p id="radius3"></p>
</body>
</html>
Round with Three Value
We can use three values that will be used to set border-radius. The first value will be used to set top-left, the second value for top-right and bottom-left corners and third value will set the bottom-right corner.
<!DOCTYPE html>
<html>
<head>
<style>
#radius1 {
border-radius: 15px 30px 45px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius2 {
border-radius: 25px 50px 75px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius3 {
border-radius: 45px 90px 135px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The CSS border-radius Property</h1>
<p>Two value - border-radius: 15px 30px 45px:</p>
<p id="radius1"></p>
<p>Two value - border-radius: 25px 50px 75px:</p>
<p id="radius2"></p>
<p>Two value - border-radius: 45px 90px 135px:</p>
<p id="radius3"></p>
</body>
</html>
Round with Four Value
We can also provide four values where each of them will be used for a single corner. First value will be for the top-left corner, the second value will be for the top-right corner, the third corner will be for bottom-right corner and the forth corner will be for bottom-left corner.
<!DOCTYPE html>
<html>
<head>
<style>
#radius1 {
border-radius: 15px 30px 45px 60px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius2 {
border-radius: 25px 50px 75px 100px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius3 {
border-radius: 45px 90px 135px 180px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The CSS border-radius Property</h1>
<p>Two value - border-radius: 15px 30px 45px 60px:</p>
<p id="radius1"></p>
<p>Two value - border-radius: 25px 50px 75px 100px:</p>
<p id="radius2"></p>
<p>Two value - border-radius: 45px 90px 135px 180px:</p>
<p id="radius3"></p>
</body>
</html>
Round with Pixel Value
While rounding corners of the HTML elements we generally use pixels as parameter or size unit. Pixel is defined with the px after the size like below.
15px 30px 150px
Round with Percentage Value
We can also use other unit types like a percentage in order to specify the round size. We will use the percentage sign % and provide the percentage of the axis for the corner.
<!DOCTYPE html>
<html>
<head>
<style>
#radius1 {
border-radius: 20%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius2 {
border-radius: 30%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The CSS border-radius Property</h1>
<p>Two value - border-radius: 20% Percentage</p>
<p id="radius1"></p>
<p>Two value - border-radius:30% Percentage:</p>
<p id="radius2"></p>
<p>Two value - border-radius: 50% Percentage:</p>
<p id="radius3"></p>
</body>
</html>
Round Top Left Corner
We can also specifically set the corner we want to round. If we want to round the top left corner we can use border-top-left-radius CSS attribute like below.
<!DOCTYPE html>
<html>
<head>
<style>
#radius1 {
border-top-left-radius: 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius2 {
border-top-left-radius: 60px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius3 {
border-top-left-radius: 120px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The CSS border-radius Property</h1>
<p>Border Top Left Radius 30px</p>
<p id="radius1"></p>
<p>Border Top Left Radius 60px</p>
<p id="radius2"></p>
<p>Border Top Left Radius 120px</p>
<p id="radius3"></p>
</body>
</html>
Round Top Right Corner
If we want to round the top right corner we can use border-top-right-radius CSS attribute like below.
<!DOCTYPE html>
<html>
<head>
<style>
#radius1 {
border-top-right-radius: 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius2 {
border-top-right-radius: 60px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius3 {
border-top-right-radius: 120px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The CSS border-radius Property</h1>
<p>Border Top Right Radius 30px</p>
<p id="radius1"></p>
<p>Border Top Right Radius 60px</p>
<p id="radius2"></p>
<p>Border Top Right Radius 120px</p>
<p id="radius3"></p>
</body>
</html>
Round Bottom Left Corner
If we want to round the bottom left corner we can use border-bottom-left-radius CSS attribute like below.
<!DOCTYPE html>
<html>
<head>
<style>
#radius1 {
border-bottom-left-radius: 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius2 {
border-bottom-left-radius: 60px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius3 {
border-bottom-left-radius: 120px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The CSS border-radius Property</h1>
<p>Border Bottom Left Radius 30px</p>
<p id="radius1"></p>
<p>Border Bottom Left Radius 60px</p>
<p id="radius2"></p>
<p>Border Bottom Left Radius 120px</p>
<p id="radius3"></p>
</body>
</html>
Round Bottom Right Corner
If we want to round the bottom right corner we can use border-bottom-right-radius CSS attribute like below.
<!DOCTYPE html>
<html>
<head>
<style>
#radius1 {
border-bottom-right-radius: 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius2 {
border-bottom-right-radius: 60px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#radius3 {
border-bottom-right-radius: 120px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The CSS border-radius Property</h1>
<p>Border Bottom Right Radius 30px</p>
<p id="radius1"></p>
<p>Border Bottom Right Radius 60px</p>
<p id="radius2"></p>
<p>Border Bottom Right Radius 120px</p>
<p id="radius3"></p>
</body>
</html>
