語法：

border-radius：length/persentage；

1.一個屬性值。如border-radius:6px;

它表示元素四個方向的圓角大小都是6px，即每個圓角的“水平半徑”和“垂直半半徑”都設定為6px；

2.四個屬性值，分別表示左上角、右上角、右下角、左下角的圓角大小（順時針方向）

border-radius：10px 20px 30px 40px;

3.三個屬性值，第一個值表示左上角，第二個值表示右上角和左下角（對角），第三個值表示右下角。

border-radius:10px 30px 60px;

4.兩個屬性值，

border-radius:20px 40px;

5.斜槓二組值：第一組值表示水平半徑，第二組值表示垂直半徑，每組值也可以同時設定1到4個值，規則與上面相同。

border-radius:100px/40px;

border-radius:60px 60px 60px 60px/100px 100px 60px 60px;

實際運用

實心圓

.circle{

  width: 120px;

   height: 120px;

   background: #EC0465;

   border-radius: 100%;

}

半圓

.lf-self-circle 
 
{

   width: 60px;

   height: 120px;

   background: #EC0465;

   border-radius: 60px 0 0 60px;

}

扇形

.quarter-botlf-cir {

   width: 60px;

   height: 60px;

   background: #EC0465;

   border-radius: 0 0 0 60px;

}

花瓣

.flower {

   width: 120px;

   height: 120px;

   background: #EC0465;

   border-radius
 
: 60px 60px 0 60px;

}

膠囊

.level-capsule {

   width: 160px;

   height: 100px;

   border-radius: 50px;

   background: #EC0465;

}

橢圓

.ty{

   width: 160px;

   height: 100px;

   background: #EC0465;

   border-radius: 80px/50px;

}