Home > Article > Daily Programming > What are the css properties for rounded borders?
What are the css properties for rounded borders?
- hzcOriginal
- 2020-06-12 15:16:1510665browse
What are the css properties of the rounded border:
1. Introduction to the rounded border
It is to set the four corners of the element through the border-radius attribute {the attribute is not inherited}.
border-radius has four attributes: top, left, right, bottom, which can be used to set pixels. You can also directly set a value so that all four sides are equal.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{border: 5px solid red;
border-radius: 50px;
width: 50px;
height: 100px;
background-color: yellowgreen;
margin:auto;
box-shadow: 100px 100px 40px green;}
</style>
</head>
<body>
<div></div>
</body>
</html>
You can also set two values border-radius at the same time: 50px 99px; correspondingly, they are 50px for top and bottom, and 99px for left and right. You can also set three values to set the border-radius clockwise: 50px 99px 40px; the top is 50px, the left and right are 99px, and the bottom is 40px.
2. You can also use border-radius: r to set a circle. The r here refers to the size of the radius (with a length unit). To create a circle, you should set the value of r to the height of the element. and half the length. When the height and width are equal, this method of selecting the value is that the circle will develop towards an ellipse as the width and height are changed.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{border: 5px solid red;
border-radius: 50%;
width: 100px;
height: 100px;
background-color: yellowgreen;
margin:auto;
box-shadow: 100px 100px 40px green;}
</style>
</head>
<body>
<div></div>
</body>
</html>Circle:
Oval;
Recommended tutorial: "css tutorial》
The above is the detailed content of What are the css properties for rounded borders?. For more information, please follow other related articles on the PHP Chinese website!