border-top-left-radius:要素の左上の角を丸くする

初期値 0
適用対象 全ての要素、::first-letterborder-collapsecollapseの場合は表の内部要素である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に指定できる値

<length>
CSSで使用できる長さを表す単位つきの値です。ピクセル、インチ、メートル法の単位による絶対値や、フォントサイズやビューポートの大きさを基準とした相対値が使用できます。負の数値は扱えません。
<percentage>
パーセントで割合を表すデータ型の値です。円の半径や楕円の半長軸または半短軸の長さを、要素の長さの割合から算出します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さを参照します。負の数値は扱えません。

border-top-left-radiusの使い方とサンプル

border-top-left-radiusプロパティの構文は以下の通りです。

CSS
/* <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には、一つないし二つの値を与えます。まず初めに一番単純な方法を見て行きましょう。このプロパティに一つの値を記述した場合は、以下のように表示されます。

CSS
#radius_box {
	border-top-left-radius: 5px;
}
表示確認

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

CSS
#radius_box {
	border-top-left-radius: 20px 40px;
}
表示確認

割合を一つ指定した場合は、長編と短辺の掛け合わせになるので、歪んだカーブになります。これを四つの角に同時に指定すると横長の楕円形になります。

CSS
#radius_box {
	border-top-left-radius: 50%;
}
表示確認

要素の幅と高さを絶対値で指定すると、正確な図形を描くこともできます。例えば、幅と高さを100pxに揃えた正方形に先ほどのスタイルを適用すると、左上の角が完全な円形の一部のカーブになります。

CSS
#radius_box {
	width: 100px;
	height: 100px;
	border-top-left-radius: 50%;
}
表示確認

同時に別の角を丸くする場合は、該当するプロパティを併記します。これらを一括で制御できるようにしたのがborder-radiusです。

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