角丸を指定するborder-radiusプロパティに，

　　border-radius: 10px;

　とひとつだけ書くと，４つの角がすべて同じ10pxの丸みを帯びます．

　ところが，次のように２つ書いてみます．

　　border-radius: 10px 20px;

　すると，左上と右下が10px，右上と左下が20px丸くなります．

　　border-radius: 10px 20px 30px;

　とすると，右下は30pxに変わり，

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

　では左下が40px丸くなりました．

　なぜでしょう．

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

　と書くと，

• 左上が10px
• 右上が20px
• 右下が30px
• 左下が40px

　を意味します．左上から時計回りに4つの角丸を決められます．

　　border-radius: 10px 20px 30px;

　は4つ目が足りないですが，対角線上の2番目の角と同じ

　　border-radius: 10px 20px 30px 20px;

　という意味になります．

　同様に，3つ目が足りない

　　border-radius: 10px 20px;

　は対角線上の1番目の角と同じなので，

　　border-radius: 10px 20px 10px 20px;

　という意味なのです．

　角丸は円の丸さだけでなく，楕円の丸さも書けます．

　　border-radius: 10px / 5px;

　とスラッシュを挟むと，

　横が10px，縦が5pxの楕円で角丸できます．

　これも各角で指定でき，

　　border-radius: 10px 20px 30px 40px / 15px 25px 35px 45px;

　などと書けます．

 以上角丸のプロパティborder-radiusの使い方でした．