border-radius

border-radiusは要素の各角を角丸にする為のプロパティです。

値を1つだけ指定した場合、すべての角が指定した値を半径にもつ角丸になります。

div {
  border-radius: 40px;
}

値を2つ指定した場合、左上が右下は最初に指定した値が半径に適応され、右上と左下は2番目に指定した値が適応された半径にもつ角丸になります。

div {
  border-radius: 40px 20px;//左上が右下は40px、右上と左下は20px
}

値を3つ指定した場合、左上は最初に指定した値が半径に適応され、右上と左下は2番目に指定した値が適応され、右下は3番目に指定した値が適応された半径にもつ角丸になります。

div {
  border-radius: 40px 10px 20px;//左上は40px、右上と左下は10px、右下は20px
}

値を4つ指定した場合、左上は最初に指定した値が半径に適応され、右上は2番目に指定した値が適応され、右下は3番目に指定した値が適応され、左下は4番目に指定した値が適応された半径にもつ角丸になります。

div {
  border-radius: 40px 10px 20px 0;//左上は40px、右上は10px、右下は20px、左下は0
}

/(スラッシュ)が含まれる場合、角丸の円の大きさはスラッシュの前に指定したグループを横幅にスラッシュの後に指定したグループを高さとして計算されます。

div {
  border-radius: 40px 10px 20px 0 / 10px 20px;
}

上の例では、左上は横幅40px高さ10pxの円を、右上は横幅10px高さ20pxの円を、右下は横幅20px高さ10pxの円を、左下は横幅0px高さ20pxの円を基準とした角丸になります。

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

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

登録日 : 2014年05月19日最終更新日 : 2014年5月20日

CSSリファレンス