border-top-left-radius:要素の左上の角を丸くする
初期値 | 0 |
適用対象 | 全ての要素、::first-letter 。 border-collapse がcollapse の場合は表の内部要素であるinline-table には適用されない。 |
継承 | しない |
アニメーション | <length>値、<percentage>値、calc(); |
対応ブラウザ | caniuseで確認 |
border-top-left-radiusプロパティの説明
border-top-left-radius
は、要素の左上の角を丸くします。角丸の曲率は、要素の縁から水平方向と垂直方向に伸ばした線が交わる点を中心に持つ円の半径によって定義します。これについては、border-radius
の解説を参照して下さい。
border-top-left-radius
は、要素の左上の角のみを対象としたプロパティです。これ自体は限定的な機能であるため使う機会は少ないかもしれませんが、四隅に共通のカーブを指定している要素に対して、後から一時的に上書きしたい場面などで活躍するかもしれません。
四隅の角をまとめて丸くしたい場合は、ショートハンド・プロパティのborder-radius
を使用して下さい。それ以外の各角に対応しているプロパティは以下になります。
border-top-left-radius
:左上の角を対象に丸みを指定するborder-top-right-radius
:右上の角を対象に丸みを指定するborder-bottom-right-radius
:右下の角を対象に丸みを指定するborder-bottom-left-radius
:左下の角を対象に丸みを指定する
border-top-left-radiusに指定できる値
- <length>
- CSSで使用できる長さを表す単位つきの値です。ピクセル、インチ、メートル法の単位による絶対値や、フォントサイズやビューポートの大きさを基準とした相対値が使用できます。負の数値は扱えません。
- <percentage>
- パーセントで割合を表すデータ型の値です。円の半径や楕円の半長軸または半短軸の長さを、要素の長さの割合から算出します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さを参照します。負の数値は扱えません。
border-top-left-radiusの使い方とサンプル
border-top-left-radius
プロパティの構文は以下の通りです。
/* <length>値 */
border-top-left-radius: 5px;
border-top-left-radius: 0.3in;
border-top-left-radius: 1.5em;
border-top-left-radius: 3rem;
border-top-left-radius: 5vwax;
/* <percentage>値 */
border-top-left-radius: 5%;
border-top-left-radius: 24%;
/* 水平方向の半径 垂直方向の半径 */
border-top-left-radius: 10px 20px;
/* グローバル値 */
border-top-left-radius: inherit;
border-top-left-radius: initial;
border-top-left-radius: revert;
border-top-left-radius: unset;
border-top-left-radiusの実例
border-top-left-radius
には、一つないし二つの値を与えます。まず初めに一番単純な方法を見て行きましょう。このプロパティに一つの値を記述した場合は、以下のように表示されます。
#radius_box {
border-top-left-radius: 5px;
}
二つの値を指定した場合は、一番目の値が水平方向に適用され、二番目の値が垂直方向のカーブに適用されます。
#radius_box {
border-top-left-radius: 20px 40px;
}
割合を一つ指定した場合は、長編と短辺の掛け合わせになるので、歪んだカーブになります。これを四つの角に同時に指定すると横長の楕円形になります。
#radius_box {
border-top-left-radius: 50%;
}
要素の幅と高さを絶対値で指定すると、正確な図形を描くこともできます。例えば、幅と高さを100px
に揃えた正方形に先ほどのスタイルを適用すると、左上の角が完全な円形の一部のカーブになります。
#radius_box {
width: 100px;
height: 100px;
border-top-left-radius: 50%;
}
同時に別の角を丸くする場合は、該当するプロパティを併記します。これらを一括で制御できるようにしたのがborder-radius
です。
#radius_box {
border-top-left-radius: 5px;
border-top-right-radius: 20px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 80px;
}
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-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-radius | 要素の角丸についてまとめて指定する |
border-right | 要素の右辺に境界線を付ける |
border-right-color | 要素の右辺に表示する境界線の色を指定する |
border-right-style | 要素の右辺に表示する境界線の形状を指定する |
border-right-width | 要素の右辺に表示する境界線の幅を指定する |
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 | アウトラインの太さを指定する |