1、属性介绍
border-radius:none|12.3px,取值不可为负数,表示边框圆角
相关属性:border-top-right-radius ,
border-bottom-right-radius ,
border-bottom-left-radius ,
border-top-left-radius
2、版本兼容性
(1)IE不兼容
(2)火狐2.0不兼容
(3)Opera 9.64不兼容
(4)Chrome 1.0.x和2.0.x兼容
3、属性实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3之Border-radius</title>
<style type="text/css">
body{
50%;
height:100%;
font-size:14px;
}
div{
100%;
height:100px;
text-align:center;
vertical-align:middle;
alignment-adjust:after-edge;
alignment-baseline:after-edge;
font-family:Tahoma, Geneva, sans-serif;
border-style:solid;
border-thick;
-moz-border-radius:12px;
-webkit-border-radius:20px;
-moz-border-radius-bottomleft:12px;
-webkit-border-bottom-left-radius:12px;
-moz-border-radius-bottomright:12px;
-webkit-border-bottom-right-radius:12px;
-moz-border-radius-topleft:12px;
-webkit-border-top-left-radius:12px;
-moz-border-radius-topright:12px;
-webkit-border-top-right-radius:12px;
}
</style>
</head>
<body>
<div>
设置边框四方向的圆角
</div>
</body>
</html>
4、浏览器运行结果