Home >Web Front-end >Front-end Q&A >How to use css border-radius property
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!