CSS border-radius
This CSS property sets the rounded borders and the rounded corners around an element, tags, or div. It defines the radius of the box corners.
The shorthand Property for border top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. It provides the rounded shape to the corners of the border of an element. We can set the border for all four corners of the box in a single declaration using the border-radius. The values of this property can be defined in percentage/length units.
border-top-left-radius – Set the border-radius for the top-left corner
border-top-right-radius – Set the border-radius for the top-right corner
border-bottom-right-radius – Set the border-radius for the bottom-right corner
border-bottom-left-radius – Set the border-radius for the bottom-left corner
Syntax:
border-radius: 1-4 length | % / 1-4 length | % | inherit | initial;
Property values:
length: It defines the shape of the corners. It denotes the size of the border-radius using length values. Its default value is 0. It does not allow negative values.
percentage: It denotes the size of the radius in percentage. It also does not allow negative values.
Example:
<!DOCTYPE html>
<html>
<head>
<title> CSS border-radius </title>
<style>
div {
padding: 50px;
margin: 20px;
border: 6px ridge #0000ff;
width: 300px;
float: left;
height: 120px;
}
p{
font-size: 25px;
}
#one {
border-radius: 90px;
background: lightgreen;
}
#two {
border-radius: 25% 10%;
background: #9933ff;
}
#three {
border-radius: 35px 10em 10%;
background: cyan;
}
#four {
border-radius: 50px 50% 50cm 50em;
background: #99ff99;
}
</style>
</head>
<body>
<div id = "one">
<h2> Welcome to the I2tutorials </h2>
<p> border-radius: 90px; </p>
</div>
<div id = "two">
<h2> Welcome to the I2tutorials </h2>
<p> border-radius: 25% 10%; </p>
</div>
<div id = "three">
<h2> Welcome to the I2tutorials </h2>
<p> border-radius: 35px 10em 10%; </p>
</div>
<div id = "four">
<h2>Welcome to the I2tutorials</h2>
<p>border-radius: 50px 50% 50cm 50em;</p>
</div>
</body>
</html>
OUTPUT:
Example- border-top-left-radius:
<!DOCTYPE html>
<html>
<head>
<title> CSS border-radius </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>Welcome to the I2tutorials</h2>
<p>border-top-left-radius: 250px;</p>
</div>
</center>
</body>
</html>
OUTPUT:
Example- border-top-right-radius:
<!DOCTYPE html>
<html>
<head>
<style>
#left {
border-top-right-radius: 50%;
background:#000066;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
color:white;
}
</style>
</head>
<body>
<center>
<div id = "left">
<h2>Welcome to the I2tutorials</h2>
<p>border-top-right-radius: 50%;</p>
</div>
</center>
</body>
</html>
OUTPUT:
Example- border-bottom-right-radius:
<!DOCTYPE html>
<html>
<head>
<style>
#left {
border-bottom-right-radius: 50%;
background: #cc0066;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<div id = "left">
<h2>Welcome to the I2tutorials</h2>
<p>border-bottom-right-radius: 50%;</p>
</div>
</center>
</body>
</html>
OUTPUT:
Example- border-bottom-left-radius:
<!DOCTYPE html>
<html>
<head>
<style>
#left {
border-bottom-left-radius: 50%;
background: #9900cc;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<div id = "left">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-bottom-left-radius: 50%;</p>
</div>
</center>
</body>
</html>
OUTPUT:
