border-radius
┣ border-top-left-radius
┃
┣ border-top-right-radius
┃
┣ border-bottom-right-radius
┃
┗ border-bottom-left-radius
をまとめて指定するプロパティです。
borderとは、box要素のbackgroundとして、border領域までの角の形状を丸めるプロパティであることに留意してください。
記述の仕方
border-radius: [値];
値：単位付き長さ
半径を 長さで与えます。
円
値はスペースで区切って複数与えることができます。
border-radius: 10px; /*１つの場合*/
すべての角が同じ
border-radius: 10px 20px; /*２つの場合*/
左上と右下、右上と左下が同じ
border-radius: 10px 20px 30px; /*３つの場合*/
左上、右上と左下が同じ、右下
border-radius: 10px 20px 30px 40px; /*４つの場合*/
左上、右上、右下、左下に指定
値：％
%で与えることもできます。
border-radius: 50% 50%;
楕円になりました！
楕円
「/」で区切って、[横軸/縦軸] の値を設定し、角を楕円にすることができます。
border-radius: 24px/16px;
横=24px / 縦=16px
border-radius: 24px 24px 18px 18px/16px 16px 32px 32px;
/の前後はスペースを入れない
個別指定
border-top-right-radius: 100% 100%; /*個別指定では、横幅 高さ を指定します
1/4 楕円になります
次の一括指定のコードと同じになります。
border-radius: 0 100% 0 0/0 100% 0 0;
同じです
使用例
backgroundに画像を指定すれば、角を丸く切り抜いて表示できます。ただし、表示された画像は、背景色と同じで、単なる装飾としての意味しか持たないことに注意しましょう。
.border-image {
background-image: url(画像ファイルのパス);
border-radius: 40%/40%;
}