- The border-radius property is used to add rounded corners to an element.
- Four values: first value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner
- Three values: first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right
- Two values: first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner
- One value: all four corners are rounded equally
The border-radius property is a shorthand property for setting the four border properties.
If you specify only one value for the border-radius property, this radius will be applied to all 4 corners.
- The rules are:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
border: 2px solid red;
margin-top: 10px;
padding: 10px;
}
.topleft {
border-top-left-radius: 25px;
}
.topright {
border-top-right-radius: 25px;
}
.bottomleft {
border-bottom-left-radius: 25px;
}
.bottomright {
border-bottom-right-radius: 25px;
}
.all {
border-radius: 25px;
}
</style>
</head>
<body>
<div class="topleft">
Here Applied border-top-left-radius:25px
</div>
<div class="topright">
Here Applied border-top-right-radius:25px;
</div>
<div class="bottomleft">
Here Applied border-bottom-left-radius:25px;
</div>
<div class="bottomright">
Here Applied border-bottom-right-radius:25px;
</div>
<div class="all">
Here Applied border-radius: 25px;
</div>
</body>
</html>
Css :- The border Radius
![Css :- The border Radius]()
Reviewed by Network security
on
May 23, 2019
Rating:
No comments: