角丸ボーダー border-radius プロパティのおさらい

CSS

環境とか

値

長さ(px など)あるいは % を使用できる。
% 指定は Chromium が未対応!? さらに、Web ブラウザごとに見え方がだいぶ異なる。(確認)

div {
  border-radius: 30%;
  -moz-border-radius: 30%;
  -webkit-border-radius: 30%;
}

一括指定

四隅一括指定 (確認)

div {
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}

左上右下 右上左下 (-webkit- は未対応) (確認)

div {
  border-radius: 20px 0;
  -moz-border-radius: 20px 0;
}

個別に指定 (確認)

div {
  border-radius: 20px 0 20px 0;
  -moz-border-radius: 20px 0 20px 0;
  -webkit-border-radius: 20px 0 20px 0;
}

楕円角丸の場合 (水平方向の半径 / 垂直方向の半径) (確認)

div {
  border-radius: 20px / 50px;
  -moz-border-radius: 20px / 50px;
  -webkit-border-radius: 20px / 50px;
}

(確認)

div {
  border-radius: 20px 0 20px 0 / 50px 0 50px 0;
  -moz-border-radius: 20px 0 20px 0 / 50px 0 50px 0;
  -webkit-border-radius: 20px 0 20px 0 / 50px 0 50px 0;
}

個別のプロパティを使う

※-moz- は、他のプロパティと形が異なるので要注意。
左上 (確認)

div {
  border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -webkit-border-top-left-radius: 20px;
}

右上 (確認)

div {
  border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -webkit-border-top-right-radius: 20px;
}

左下 (確認)

div {
  border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  -webkit-border-bottom-left-radius: 20px;
}

右下 (確認)

div {
  border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright : 20px;
  -webkit-border-bottom-right-radius: 20px;
}

試した環境では、個別のプロパティで楕円を扱うことは出来なかった。 (確認)

div {
  border-top-left-radius: 50px / 20px;
  -moz-border-radius-topleft: 50px / 20px;
  -webkit-border-top-left-radius: 50px / 20px;
}