Home > Article > Web Front-end > How to use border-radius property
How to use border-radius property
- 青灯夜游Original
- 2019-01-30 13:09:165653browse
The border-radius attribute is used to create rounded corners. Its usage syntax is "border-radius: 1-4 length|%;". border-radius is a parameter that can specify up to four "border -*- radius "Composite attribute of the attribute.
The operating environment of this article: Windows 7 system, Dell G3 computer, HTML5&&CSS3 version.
CSS3 border-radius property
Function: The border-radius property is used to create rounded corners
Description: The border-radius attribute is a composite attribute that can specify up to four border -*- radius attributes.
Basic syntax:
border-radius: 1-4 length|% ;
Note: The order of the four values of each radius is: upper left corner, upper right corner, lower right corner, Lower left corner. If the lower left corner is omitted, the upper right corner is the same. If the lower right corner is omitted, the upper left corner is the same. If the upper right corner is omitted, the upper left corner is the same.
css3 border-radius attribute usage example
<!DOCTYPE html>
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
margin: 100px auto;
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>Rendering:
The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !
The above is the detailed content of How to use border-radius property. For more information, please follow other related articles on the PHP Chinese website!