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

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

藏色散人Original: 2018-08-13 16:52:514401browse

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:

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|%;

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!

css chrome safari webkit border

Statement：

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

Previous article：Code examples for implementing 3D animation special effects using cssNext article：Code examples for implementing 3D animation special effects using css

See more

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

Related articles