ウェブランサー

border-top-left-radius - 要素の左上の角丸を指定する

取り扱い CSS3から追加された要素
適用可能 全ての要素(border-collapseプロパティの値にcollapseが指定されたtable要素を除く)
継承 しない
対応ブラウザ border-top-left-radiusの対応状況を確認する

border-top-left-radiusプロパティの説明

border-top-left-radiusは、要素の左上の角を丸くする、つまり「角丸」にしたい場合に使用します。要素の四つの角はそれぞれ独立した値を持っていますが、このプロパティは左上の角のみ定義することができます。CSSの角丸デザインは、ボタンや入力エリア、フキダシ状の見出しを作ったり図形を描画するなど、多岐にわたって活用できます。border-top-left-radiusはCSS3で追加されたプロパティです。

このプロパティが指定されると、たとえボックスにボーダーが指定されていなくても、背景が描画される面も丸まって表示されます。

角丸の形状は、二つの辺の接続点に当たる角の頂点から、水平方向と垂直方向に伸ばした半径の組み合わせで決定されます。そのため、一つの要素は四つの角を持つわけですから、八つの値を使って角丸のカーブを表現することになります。

 
 
右上の角丸が50pxの場合
右上の頂点から水平方向に50px
右上の頂点から垂直方向に50px
この半径を持つ円の四分の一が
角丸のカーブとなる。

水平方向と垂直方向の値は、まとめて同じ値を指定することもできますし、個別に違う値を設定することもできます。詳しい記述方法は使用サンプルを参照してください。

border-radiusは、上下左右の四つの角丸をまとめて指定する短縮形プロパティです。左上のみを指定する場合はborder-top-left-radiusを、右上のみを指定する場合はborder-top-right-radiusを、右下のみを指定する場合はborder-bottom-right-radiusを、左下のみを指定する場合はborder-bottom-left-radiusを、それぞれ用います。

border-top-left-radiusに与えられる値

数字と単位で指定する
pxやemといった単位と数字を組み合わせて指定する方法です。「10px」や「2em」のように記述します。
パーセントで指定する
「5%」「10%」のように記述します。

border-top-left-radiusの使用サンプル

border-top-left-radiusに値を一つ指定した場合は、左上の角の水平方向、垂直方向共に同じカーブを表示します。

CSS
.btlr_sample_01 {
	border-top-left-radius: 10px;
}
表示確認
左上の角丸の半径が10px
※変化が分かりやすいように背景色とボーダーを付与しています

border-top-left-radiusに二つの値を指定した場合は、一番目の値が水平方向、二番目の値が垂直方向のカーブに適用されます。

CSS
.btlr_sample_02 {
	border-top-left-radius: 20px 40px;
}
表示確認
左上の水平方向の半径が20px
左上の垂直方向の半径が40px

四つの角にそれぞれ別の値を指定した場合のサンプルです。

CSS
.br_sample_10 {
	border-top-left-radius: 20px 40px;
	border-top-right-radius: 50px 20px;
	border-bottom-right-radius: 15px 15px;
	border-bottom-left-radius: 0px 0px;
}
表示確認
border-top-left-radius: 20px 40px;
border-top-right-radius: 50px 20px;
border-bottom-right-radius: 15px 15px;
border-bottom-left-radius: 0px 0px;

border-top-left-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 アウトラインの太さを指定する