What is the rounded border property of css3-CSS Tutorial-php.cn

What is the rounded border property of css3

WBOY

Release： 2021-12-23 16:32:02

Original

4419 people have browsed it

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.

What is the rounded border property of css3

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: //左下角

Copy after login

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>

Copy after login

Output result:
What is the rounded border property of css3

(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!