Home > Web Front-end > CSS Tutorial > How to write css rounded border code? (code example)

How to write css rounded border code? (code example)

藏色散人
Release: 2018-08-13 16:52:51
Original
4466 people have browsed it

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>
Copy after login

The effect is as follows:

How to write css rounded border code? (code example)

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|%;
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template