border-top-left-radiusプロパティの説明
CSSの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;
}