Home > Article > Web Front-end > How to use css border-radius property
How to use css border-radius property
- 藏色散人Original
- 2019-05-29 13:24:032814browse
css border-radius property is a shorthand property for setting four border-*-radius properties. Its syntax is syntax border-radius: 1-4 length|% / 1-4 length|%.
How to use the css border-radius property?
Function: Abbreviation attribute, used to set four border-*-radius attributes.
Syntax:
border-radius: 1-4 length|% / 1-4 length|%;
Description:
length Defines the shape of the fillet.
% Defines the shape of the fillet in percentage.
Note:
Set the four values of each radii in this order. If bottom-left is omitted, it is the same as top-right. If bottom-right is omitted, it is the same as top-left. If top-right is omitted, it is the same as top-left.
css border-radius property 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 */
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>Effect output:
The above is the detailed content of How to use css border-radius property. For more information, please follow other related articles on the PHP Chinese website!