要实现圆角的效果其实很简单，用一个radius属性就行了。话不多说，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.top{
width: 100px;
height: 100px;
border: 1px solid #333;
border-radius: 10px;/* 圆角的大小可以自己调 */
}
</style>
</head>
<body>
<div class="top">
</div>
</body>
</html>
在浏览器打开：
就实现了这样的圆角效果。
而且我们还可以某一个角实现圆角效果，以下两段代码是等价的：
border-radius: 10px;
border-top-right-radius:10px;
border-top-left-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
如果你只想让边框的某一个角实现圆角效果的话，就只对那个角设置对应的属性就行了。