border-radiusとは
- ここで説明するborder-radius とは次の語句からなるCSSのプロパティです。
- border
- 読み: ボーダー
意味: 領域、縁、端、境界 - radius
- 読み: レイディアス、ラジアス
意味: 半径
border-radiusプロパティの概要
このプロパティは要素の境界線の四辺の角を丸く描画することができます。
このborder-radiusは下記の個別プロパティの値を一括で指定することができるので、 四方の角を一行のコードで設定したい場合はこのプロパティで設定します。
構文
このプロパティの構文の記述は以下のような書き方になります。
セレクター{border-radius: 四角の値;}
セレクター{border-radius: 左上と右下の値 右上と左下の値;}
セレクター{border-radius: 左上の値 右上と左下の値 右下の値;}
セレクター{border-radius: 左上の値 右上の値 右下の値 左下の値;}
実機サンプルとサンプルコード
ここからは実際のdiv要素にプロパティを適用させて結果を見ていきたいと思いますが、 要素の境界線が表示されていなければ角を丸くしても分かりづらいので、予め境界線が表示されるように次の設定をしています。
線の太さ: medium
線のスタイル: solid
線の色: black
div{
background-color: ##khaki;
border: medium solid ##black;
}初期値: 0
このプロパティの初期値は「0」です。 これは角から円の中心点までのオフセットが0ということです。 0は「なし」という意味で簡単に解釈されてもよいと思います。
結果として要素の角は丸くなりません。
div{border-radius: 0;}数値: 単位付き数値で半径を指定する
半径値に単位付き数値を指定することで境界の角を丸くすることができます。 この場合、要素の角を起点として要素の中心点へ向かい、指定値分だけオフセットした位置が円の中心点となります。
詳しい単位についてはCSSの単位についてを参照してください。
div{border-radius: 50px;}パーセンテージ値: パーセント値で半径を指定する
半径値をパーセントで指定することで境界の角を丸くすることができます。 この場合、要素の角を起点として要素の中心点へ向かい、要素の辺の長さ×指定%だけオフセットした位置が円の中心点となります。
詳しい単位についてはCSSの単位についてを参照してください。
div{border-radius: 50%;}楕円にする
2つの数値を使って半径の中心点を設定した場合、最初の値は水平方向のオフセット値であり、2番目の値は垂直方向のオフセット値となります。 2つの値が違う場合には丸みは楕円になります。
div{border-radius: 80px 50px;}四方向を別々の値で角丸にする
四方の角に別々の値を指定する書き方は、
{border-radius: 左上値 右上値 右下値 左下値;}
となります。
※各値は半角スペースで区切る必要があります。
10% 20% 30% 40%
10px 20px 30px 40px
div{border-radius: 10% 20% 30% 40%;}
div{border-radius: 10px 20px 30px 40px;}
グローバル値
border-radiusプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。
- inheritは親要素の値の継承を促します。
- initialは値を初期値の0に戻します。
-
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{border-radius: グローバル値;}補足説明
- すべての要素に適用可能
- 親要素の値を継承しない
まとめ
ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。
border-radius: 0;
border-radius: 50px;
border-radius: 70% 20%;
border-radius: 10% 20% 30% 40%;
border-radius: 10px 20px 30px 40px;
サンプル: ブロック要素