border-radius:要素の角丸についてまとめて指定する
取り扱い | CSS3から追加された要素 |
適用可能 | 全ての要素(border-collapseプロパティの値にcollapseが指定されたtable要素を除く) |
継承 | しない |
対応ブラウザ | border-radiusの対応状況を確認する |
border-radiusプロパティの説明
border-radiusは、要素の角を丸くする、つまり「角丸」にしたい場合に使用します。要素の四つの角はそれぞれ独立した値を持っていますが、このプロパティは全てをまとめて指定することができます。例えば、ボタンや入力エリアの角を丸くして柔らかい雰囲気のデザインにしたり、少し工夫して「フキダシ」状の見出しを作るなど、活用できる場面は多くあります。
このプロパティが指定されると、たとえボックスにボーダーが指定されていなくても、背景が描画される面も丸まって表示されます。
角丸の形状は、二つの辺の接続点に当たる角の頂点から、水平方向と垂直方向に伸ばした半径の組み合わせで決定されます。そのため、一つの要素は四つの角を持つわけですから、八つの値を使って角丸のカーブを表現することになります。
右上の頂点から水平方向に50px
右上の頂点から垂直方向に50px
この半径を持つ円の四分の一が
角丸のカーブとなる。
それぞれの値は、まとめて同じ値を指定することもできますし、個別に違う値を設定することもできます。詳しい記述方法は使用サンプルを参照してください。
border-radiusは、上下左右の四つの角丸をまとめて指定する短縮形プロパティです。左上のみを指定する場合はborder-top-left-radiusを、右上のみを指定する場合はborder-top-right-radiusを、右下のみを指定する場合はborder-bottom-right-radiusを、左下のみを指定する場合はborder-bottom-left-radiusを、それぞれ用います。
border-radiusに与えられる値
- 数字と単位で指定する
- pxやemといった単位と数字を組み合わせて指定する方法です。「10px」や「2em」のように記述します。
- パーセントで指定する
- 「5%」「10%」のように記述します。
border-radiusの使用サンプル
border-radiusの最もシンプルな指定方法は、全ての角丸を同じカーブにする場合です。この時、一つの値を指定すれば全てのカーブに対して同じ値が適用されます。
.br_sample_01 { border-radius: 5px; }
値を二つ指定した場合は、一番目の値が左上と右下に適用され、二番目の値が右上と左下に適用されます。
.br_sample_02 { border-radius: 5px 20px; }
右上と左下の半径が20px
値を三つ指定した場合は、三番目の値が右下に適用され、二番目の値は右上と左下の共通となります。
.br_sample_03 { border-radius: 5px 20px 40px; }
右上と左下の半径が20px
右下の半径が40px
そして、値を四つ指定した場合には、全ての角に対して別々のカーブを表現することができます。
.br_sample_04 { border-radius: 5px 20px 40px 80px; }
右上の半径が20px
右下の半径が40px
左下の半径が80px
水平方向と垂直方向のカーブを別々の値で指定したい場合は、左上、右上、右下、左下の半径をワンセットとして、それぞれのセットをスラッシュ( / )で区切る形で指定します。
.br_sample_08 { border-radius: 50px 25px 15px 0px / 25px 50px 15px 0px; }
左上50px、右上25px、右下15px、左上0px
水直方向の半径
左上25px、右上50px、右下15px、左上0px
border-radiusに関連するCSSプロパティ
外枠(ボーダー・アウトライン) | |
---|---|
border | 要素の周囲にボーダー(枠線)を付ける |
border-bottom | 要素の底辺にボーダー(枠線)を付ける |
border-bottom-color | 要素の底辺に設定したボーダー(枠線)の色を指定する |
border-bottom-left-radius | 要素の左下の角丸を指定する |
border-bottom-right-radius | 要素の右下の角丸を指定する |
border-bottom-style | 要素の底辺に設定したボーダー(枠線)のスタイル(種類)を指定する |
border-bottom-width | 要素の底辺に設定したボーダー(枠線)の太さを指定する |
border-break | ボックスが分割された場合のボーダーの表示方法を指定する |
border-collapse | テーブルセルのボーダーの表示の仕方を指定する |
border-color | 要素のボーダー(枠線)の色を指定する |
border-image | 要素のボーダー(枠線)に画像を指定する |
border-image-outset | ボーダーイメージエリアを広げる |
border-image-repeat | ボーダー(枠線)に指定された画像の繰り返し方法を指定する |
border-image-slice | ボーダー(枠線)に指定された画像の使用範囲を指定する |
border-image-source | ボーダー(枠線)に使用する画像ファイルを指定する |
border-image-width | 画像ボーダーの太さを指定する |
border-left | 要素の左辺にボーダー(枠線)を付ける |
border-left-color | 要素の左辺に設定したボーダー(枠線)の色を指定する |
border-left-style | 要素の左辺に設定したボーダー(枠線)のスタイル(種類)を指定する |
border-left-width | 要素の左辺に設定したボーダー(枠線)の太さを指定する |
border-length | 脚注の区切り線の長さを指定する |
border-radius | 要素の角丸についてまとめて指定する |
border-right | 要素の右辺にボーダー(枠線)を付ける |
border-right-color | 要素の右辺に設定したボーダー(枠線)の色を指定する |
border-right-style | 要素の右辺に設定したボーダー(枠線)のスタイル(種類)を指定する |
border-right-width | 要素の右辺に設定したボーダー(枠線)の太さを指定する |
border-spacing | テーブルセルのボーダーの間隔を指定する |
border-style | ボーダー(枠線)の種類を指定する |
border-top | 要素の上辺にボーダー(枠線)を付ける |
border-top-color | 要素の上辺に設定したボーダー(枠線)の色を指定する |
border-top-left-radius | 要素の左上の角丸を指定する |
border-top-right-radius | 要素の右上の角丸を指定する |
border-top-style | 要素の上辺に設定したボーダー(枠線)のスタイル(種類)を指定する |
border-top-width | 要素の上辺に設定したボーダー(枠線)の太さを指定する |
border-width | ボーダー(枠線)の太さを指定する |
outline | アウトラインの表示方法をまとめて指定する |
outline-color | アウトラインの色を指定する |
outline-offset | アウトラインのオフセット値を指定する |
outline-style | アウトラインのスタイルを指定する |
outline-width | アウトラインの太さを指定する |