Home >Web Front-end >CSS Tutorial >How to write css rounded border code? (code example)
How to write css rounded border code? (code example)
- 藏色散人Original
- 2018-08-13 16:52:514467browse
This article mainly introduces how to achieve the CSS border effect.
The specific example of the css rounded border code is as follows:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>css圆角边框代码实例</title>
<meta charset="UTF-8">
<style type="text/css">
div
{
color: white;
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background: #029789;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>css边框设置使用border-radius 属性即可向元素添加圆角。</div>
</body>
</html>The effect is as follows:
The main ones involved here The attribute of is border-radius, which can be used to adjust the css rounded border.
Note: How to use border-radius:
border-radius: 1-4 length|% / 1-4 length|%;
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.
-webkit-border-radius is for compatibility with chrome or safari.
-moz-border-radius is for compatibility with Firefox.
The above is a detailed introduction to the css rounded border code. I hope it will be helpful to friends in need.
The above is the detailed content of How to write css rounded border code? (code example). For more information, please follow other related articles on the PHP Chinese website!