border-top-left-radius

border-top-left-radiusはCSS3で定義された要素の左上の角丸を指定するためのプロパティです。

値を1つ指定した場合、角は指定した値を半径とする円と同じ形状の角丸となります。

div {
  border-top-left-radius: 40px;
}

値を2つ指定した場合、角は最初に指定した値を横幅に次に指定した値を高さに持つ楕円と同じ形状の角丸となります。

div {
  border-top-left-radius: 40px 20px;
}

値には%も指定することができ、その場合は要素の横幅と高さを基準とした割合の円で角丸を生成します。

div {
  border-top-left-radius: 40% 20%;
}

IE	Chrome	Safari	Firefox	iOS	Android
◯ 9〜	△ 0.2〜 ◯ 4〜	△ 3〜 ◯ 5〜	△ 1〜12 ※1 ◯ 4〜	△ 3.2〜 ◯ 4〜	△ 2.1〜 ◯ 2.2〜

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。

※1 ベンダープリフィック付きの際のプロパティ名は-moz-border-radius-topleftとなっており-moz-border-top-left-radiusではないので注意が必要です。

登録日 : 2014年02月10日最終更新日 : 2014年3月16日

CSSリファレンス