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ではないので注意が必要です。

参考URL

5.1. Curve Radii: the ‘border-radius’ properties

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

同じカテゴリー(Border)のエントリー

検索

スポンサードリンク

バージョン

リファレンス