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

border-top-left-radius

要素の左上の角を丸くして角丸にします。
CSS3より追加された属性です。

border-top-left-radius: 10px;

■ 表示される内容

これは要素の左上の角を半径10ピクセルの曲線で丸くする記述です。

また、パラメータを2つ指定することで角丸の水平半径と垂直半径を別々に設定することもできます。

border-top-left-radius: 30px 10px;

■ 表示される内容

これは要素の左上の角の水平半径を30ピクセル、垂直半径を10ピクセルの曲線で丸くする記述です。
パラメータは左が水平半径、右が垂直半径を表しています。

角丸の半径の大きさ

半径の長さは数値もしくはパーセンテージで指定します。

border-top-left-radius: 10px;
border-top-left-radius: 5em;
border-top-left-radius: 15%;

入力する数値には、後ろに必ず「単位」をつける必要があります。単位を付け忘れると設定が反映されないので注意してください。

CSSで使用する長さの単位は色々ありますが、よく使用されるのは下記の2つです。

px	ピクセル。ディスプレイの点を基準とした長さ。
em	要素に設定されたフォントのサイズを基準とする長さ。フォントサイズが変わるとそれに合わせた長さとなる。

パーセンテージで指定した場合は、要素の幅・高さの指定割合を半径とした角丸になります。

角丸の半径と境界線の太さの関係

設定した角丸の半径は「境界線の幅も含めた値」と解釈されます。
そのため境界線の幅が角丸の半径より大きい場合は、境界線の部分のみが丸くなります。

border-radius: 10px;
border: 20px solid black;

■ 表示される内容

あいうえお

半径をピクセルで指定

border-top-left-radius: 10px;

■ 表示される内容

あいうえお

半径をパーセンテージで指定

border-top-left-radius: 30%;

■ 表示される内容

あいうえお

要素の幅・高さの30%の長さを半径として描写します。

水平半径・垂直半径を別々に設定する

border-top-left-radius: 30px 10px;

■ 表示される内容

あいうえお

水平半径30px・垂直半径10pxになります。