*{
margin: 0;
padding: 0;
}
.roundedCorner{
width:100px;/*寬*/
height: 100px;/*高*/
border-radius: 10px;/*圓角角度左上，右上，右下，左下都是10px*/
background: deepskyblue;/*背景顏色*/
margin: 20px auto;/*上下間距20px，左右居中*/
}
</style>
</head>
<body>
<div class="roundedCorner"></div>
</body>
效果圖：
border-radius的優勢不僅僅在制作圓角的邊框，還是利用border-radius屬性來畫圓和半圓。
制作圓的方法：
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.roundedCorner{
width: 100px;/*寬*/
height: 100px;/*高*/
border-radius: 50%;/*圓角角度設置50%，不要設置具體數值，如果哦下面的border值大的話會變形*/
background: deepskyblue;/*背景顏色*/
margin: 20px auto;/*上下間距20px，左右居中*/
border: 5px solid black;
}
</style>
</head>
<body>
<div class="roundedCorner"></div>
</body>
效果圖
制作半圓的方法;
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.roundedCorner{
width: 100px;/*寬*/
height: 50px;/*高*/
border-radius: 50px 50px 0 0;/*圓角角度*/
background: deepskyblue;/*背景顏色*/
margin: 20px auto;/*上下間距20px，左右居中*/
}
</style>
</head>
<body>
<div class="roundedCorner"></div>
</body>
效果圖
