要實現圓角的效果其實很簡單，用一個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;
如果你只想讓邊框的某一個角實現圓角效果的話，就只對那個角設置對應的屬性就行了。