属性定义及使用说明
border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
border-radius 属性是一个最多可指定四个 border-*-radius 属性的复合属性
提示： 这个属性允许你为元素添加圆角边框！
| 默认值: | 0 |
|---|---|
| 继承: | no |
| 版本: | CSS3 |
| JavaScript 语法: | object object.style.borderRadius=”5px” |
语法
border-radius: 1-4 length|% / 1-4 length|%;注意：每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
| 值 | 描述 |
|---|---|
| length | 定义弯道的形状。 |
| % | 使用%定义角落的形状。 |
例如：
border-radius: 1em/5em;
/* 等价于： */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;border-radius: 4px 3px 6px / 2px 4px;
/* 等价于： */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;椭圆边框
border-radius: 15px 50px 30px 5px：第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下角，第四个值适用于左下角。
椭圆边框
border-radius: 15px 50px 30px：第一个值适用于左上角，第二个值适用于右上角和左下角，第三个值适用于右下角。
椭圆边框
border-radius: 15px 50px：第一个值适用于左上角和右下角，第二个值适用于右上角和左下角。
椭圆边框
border-radius: 15px：该值适用于所有四个角，均等圆角。
OK，我们看下上述实例的演示效果吧。如下：
HTML
x
55
55
1
2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
<style> 7
#rcorners4 {8
border-radius: 15px 50px 30px 5px;9
padding: 20px;10
width: 200px;11
height: 150px;12
}13
14
#rcorners5 {15
border-radius: 15px 50px 30px;16
padding: 20px;17
width: 200px;18
height: 150px;19
}20
21
#rcorners6 {22
border-radius: 15px 50px;23
padding: 20px;24
width: 200px;25
height: 150px;26
}27
28
#rcorners7 {29
border-radius: 15px;30
padding: 20px;31
width: 200px;32
height: 150px;33
}34
.runoob-color {35
color: #fff !important;36
background-color: #73AD21 !important;37
background-color: #04AA6D !important;38
}39
</style>40
</head>41
<body>42
43
<p>椭圆边框 - border-radius: 15px 50px 30px 5px：第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下角，第四个值适用于左下角：</p>44
<p id="rcorners4" class="runoob-color"></p>45
46
<p>椭圆边框 - border-radius: 15px 50px 30px：第一个值适用于左上角，第二个值适用于右上角和左下角，第三个值适用于右下角：</p>47
<p id="rcorners5" class="runoob-color"></p>48
49
<p>椭圆边框 - border-radius: 15px 50px：第一个值适用于左上角和右下角，第二个值适用于右上角和左下角</p>50
<p id="rcorners6" class="runoob-color"></p>51
52
<p>椭圆边框 - border-radius: 15px：该值适用于所有四个角，均等圆角</p>53
<p id="rcorners7" class="runoob-color"></p>54
</body>55
</html>实例应用
1、背景图带边框。
HTML
xxxxxxxxxx1
26
26
1
2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
7
<style>8
#rcorners {9
border-radius: 25px;10
background: url(/wp-content/uploads/2022/02/CSS.jpg);11
background-position: left top;12
background-repeat: repeat;13
padding: 20px;14
width: 200px;15
height: 150px;16
}17
</style>18
</head>19
<body>20
21
<p>背景图带边框:</p>22
23
<div id="rcorners">圆角边框!</div>24
25
</body>26
</html>2、不同类型参数。
HTML
xxxxxxxxxx1
43
43
1
2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
<style> 7
#rcorners7 {8
border-radius: 50px/15px;9
background: #8AC007;10
padding: 20px; 11
width: 200px;12
height: 150px; 13
}14
#rcorners8 {15
border-radius: 15px/50px;16
background: #8AC007;17
padding: 20px; 18
width: 200px;19
height: 150px; 20
}21
22
#rcorners9 {23
border-radius: 50%;24
background: #8AC007;25
padding: 20px; 26
width: 200px;27
height: 150px;28
} 29
</style>30
</head>31
<body>32
33
<p>椭圆边框 - border-radius: 50px/15px:</p>34
<p id="rcorners7"></p>35
36
<p> 椭圆边框 - border-radius: 15px/50px:</p>37
<p id="rcorners8"></p>38
39
<p>椭圆边框 - border-radius: 50%:</p>40
<p id="rcorners9"></p>41
42
</body>43
</html>3、不同参数个数。
HTML
xxxxxxxxxx1
55
55
1
2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
<style> 7
#rcorners4 {8
border-radius: 15px 50px 30px 5px;9
padding: 20px;10
width: 200px;11
height: 150px;12
}13
14
#rcorners5 {15
border-radius: 15px 50px 30px;16
padding: 20px;17
width: 200px;18
height: 150px;19
}20
21
#rcorners6 {22
border-radius: 15px 50px;23
padding: 20px;24
width: 200px;25
height: 150px;26
}27
28
#rcorners7 {29
border-radius: 15px;30
padding: 20px;31
width: 200px;32
height: 150px;33
}34
.runoob-color {35
color: #fff !important;36
background-color: #73AD21 !important;37
background-color: #04AA6D !important;38
}39
</style>40
</head>41
<body>42
43
<p>椭圆边框 - border-radius: 15px 50px 30px 5px：第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下角，第四个值适用于左下角：</p>44
<p id="rcorners4" class="runoob-color"></p>45
46
<p>椭圆边框 - border-radius: 15px 50px 30px：第一个值适用于左上角，第二个值适用于右上角和左下角，第三个值适用于右下角：</p>47
<p id="rcorners5" class="runoob-color"></p>48
49
<p>椭圆边框 - border-radius: 15px 50px：第一个值适用于左上角和右下角，第二个值适用于右上角和左下角</p>50
<p id="rcorners6" class="runoob-color"></p>51
52
<p>椭圆边框 - border-radius: 15px：该值适用于所有四个角，均等圆角</p>53
<p id="rcorners7" class="runoob-color"></p>54
</body>55
</html>4、简写格式。
HTML
xxxxxxxxxx1
33
33
1
2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
<style> 7
#example1 {8
border: 2px solid red;9
padding: 10px;10
border-radius: 2em / 5em;11
}12
13
#example2 {14
border: 2px solid red;15
padding: 10px;16
border-radius: 2em 1em 4em / 0.5em 3em;17
}18
</style>19
</head>20
<body>21
22
<h2>border-radius: 2em / 5em:</h2>23
<div id="example1">24
<p>等价于: border-top-left-radius: 2em 5em; border-top-right-radius: 2em 5em; border-bottom-right-radius: 2em 5em; border-bottom-left-radius: 2em 5em;</p>25
</div>26
27
<h2>border-radius: 2em 1em 4em / 0.5em 3em:</h2>28
<div id="example2">29
<p>等价于: border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;</p>30
</div>31
32
</body>33
</html>希望能够帮助到大家！
阅读剩余 90%
作者：terry，如若转载，请注明出处：https://www.web176.com/cssprop/5644.html
支付宝 
微信 