Home > Article > Web Front-end > What is the rounded border property of css3
What is the rounded border property of css3
- WBOYOriginal
- 2021-12-23 16:32:024358browse
css3 rounded border attribute is "border-radius", which is a composite attribute with the syntax "border-radius:1-4 length|%;"; the four values of the attribute control the elements respectively. Rounded border styles for the upper left, upper right, lower right, and lower left corners.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
#What is the rounded border attribute of css3
The rounded border attribute of css3 is border-radius.
The border-radius property is a composite property that can specify up to four border -*- radius properties.
Each value can be in the form of a numerical value or a percentage.
length/length The first length represents the radius in the horizontal direction, and the second represents the radius in the vertical direction.
If it is a value, then the four values of top-left, top-right, bottom-right, and bottom-left are equal.
If there are two values, then top-left and bottom-right are equal and are the first value, and top-right and bottom-left are equal and are the second value.
If there are three values, then the first value is to set top-left, and the second value is top-right and bottom-left and they will be equal, and the third value is to set bottom-right .
If there are four values, then the first value is to set top-left, the second value is top-right, the third value is bottom-right, and the fourth value is to set bottom-left
In addition to the above abbreviations, you can also write the four corners separately like border, as follows:
border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角
The example is as follows:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div>border-radius 属性允许您为元素添加圆角边框！ </div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of What is the rounded border property of css3. For more information, please follow other related articles on the PHP Chinese website!