怎么设置CSS属性让div的边框是圆角矩形？

html-css021

怎么设置CSS属性让div的边框是圆角矩形？,第1张

#div{\x0d\x0awidth:100px\x0d\x0aheight:100px\x0d\x0abackground:#000000\x0d\x0a\x0d\x0a//设置弯曲程度，当然也可以分别设置；比如只设置左下角：border-bottom-left-radius:10px\x0d\x0aborder-radius:10px\x0d\x0a}

用border-radius属性来实现圆角功能

border-radius使用案例

<!doctype html>

<html>

<head>

<meta charset='UTF-8' />

<title>圆角功能</title>

<style type="text/css">

    #div1{

        border:1px solid #f00

        width:200px

        height:100px

        border-radius:4px<!--(左上角)--> 10px<!--(右上角)--> 20px<!--(右下角)--> 30px<!--(左下角)-->

    }

</style>

</head>

<body>

<div id="div1"></div>

</body>

</html>