何にしても生っかじりの朴念仁

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

CSS

環境とか

• Opera 10.62 for Linux i386
  • border-radius
• Firefox 3.6.10 for Ubuntu
  • -moz-border-radius
• Chromium 6.0.472.62 for Ubuntu
  • border-radius
  • -webkt-border-radius

値

長さ(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;
}

Permalink | コメント(0) | トラックバック(0) | 23:50