主要通過屬性border-radius，您能夠建立圓角邊框，正圓邊框和橢圓邊框，使用圖檔來繪制邊框 。
圓角邊框（border-radius）的基本用法：
圓角邊框的最基本用法就是設定四個相同弧度的圓角，其樣式如下：
css部分：
div{
width: 300px;
height: 300px;
border: 1px solid red;
border-radius: 20px;
}
html部分：
<div>
四個圓角相等的圓角矩形
</div>
其效果如下：
如果将值設為50%，則實作正圓形，其效果如下：
css部分：
div{
width: 300px;
height: 300px;
border: 1px solid red;
border-radius:50%;
}
html部分：
<div>
正圓形
</div>
（注：正圓隻能實作在四邊相等的條件下 如不等則實作為橢圓形）
如果輸入兩個值實作值的位置順序為：值1（左上 右下）值2（左下 右上）
css部分：
div{
width: 300px;
height: 300px;
border: 1px solid red;
border-radius: 20px 100px;
}
html部分：
<div>
輸入兩個值實作值的位置順序
</div>
其效果如下：
如果輸入三個值實作值的位置順序為：值1（左上 ）值2（左下 右上）值3（右下）
css部分：
div{
width: 300px;
height: 300px;
border: 1px solid red;
border-radius: 20px 100px 50px;
}
html部分：
<div>
輸入四個值實作值的位置順序
</div>
其效果如下：
如果輸入四個值實作值的位置順序為：值1（左上 ）值2（ 右上）值3（右下）值4 （左下）
css部分：
div{
width: 300px;
height: 300px;
border: 1px solid red;
border-radius: 20px 100px 50px 50px;
}
html部分：
<div>
輸入四個值實作值的位置順序
</div>
其效果如下：