Border
What is Border Radius in CSS?
The border-radius property in CSS enables you to define rounded corners for various elements, including divs, buttons, images, and more. By specifying a value for border-radius, you can give elements a softer and more approachable appearance, moving away from sharp edges and harsh angles.
Syntax:
The syntax for the border-radius property is as follows:
border-radius: value;
BORDER-RADIUS:
INPUT:
<!DOCTYPE>
<html>
<head>
<style>
*{
color:white;
background-color:red;
padding:5px;
}
div{
width: 20%;
color: white;
border: 2px solid black;
border-radius: 20px;
}
</style>
</head>
<body>
<div>Border radius</div>
</body>
</html>
OUTPUT:
We can also give separate border radius to each corner separately as it can be written in the following way:
INPUT:
<!DOCTYPE>
<html>
<head>
<style>
*{
color:white;
background-color:red;
padding:5px;
}
div{
width: 20%;
color: white;
border: 2px solid black;
border-radius: 15px 5px 2px 10px; /*topleft topright bottomleft bottomleft*/
}
</style>
</head>
<body>
<div>Border radius for topleft topright bottomleft bottomleft</div>
</body>
</html>
OUTPUT:
Creating Circular Elements
It is very easy to make a circular div in html.
INPUT:
<!DOCTYPE html>
<html>
<head>
<style>
* {
background-color: black;
}
div{
color: white;
border-radius: 50%;
border: 2px solid white;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
OUTPUT:
Shadow
INPUT:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2),0 0 20px rgba(0, 0, 0, 0.1);
width: 50px;
}
</style>
</head>
<body>
<div>box</div>
</body>
</html>
OUTPUT:
