CSS3 border-radius 角丸

border-radius、いわゆる、角丸である。これは割と前から使ってたcss3のプロパティである。確認ブラウザ、Chrome14.0　Firefox7.0　IE未対応。

記述方法

プロパティ「border-radius」に角丸に相当する円半径を指定する。{border-radius:10px;}で、4隅に半径10pxの円のカーブがはまる。上記にもborder-radiusを使っている。

test
border-radius:10px;

margin等と同じように、4つ指定すると、左上を起点として時計回りの指定となる。

test
border-radius:10px 20px 30px 40px;

2つ指定した場合も、左上を起点とし対角指定となる。

test
border-radius:10px 20px;

一部を指定。

test
border-top-left-radius:10px;

test
border-top-right-radius:10px;

test
border-bottom-left-radius:10px;

test
border-bottom-right-radius:10px;

楕円を使って詳細に指定する。左上を起点として時計回りに4つ指定して、「/」を挟んで同じように4つ指定する。値は最初の4つが横半径/後ろの4つが縦半径を指す。下の例の左上は横半径が200px、縦半径が100pxの楕円のカーブになる。

test
border-radius:200px 50px 50px 25px / 100px 50px 100px 25px;

上の例で作った楕円↓、要は「/」を挟んで左が横半径、右が縦半径なので4隅が同じなら指定は一つでいい。

test
border-radius:300px / 50px;

少し前までは、ブラウザ毎に、「-webkit-」や「-moz-」というものを指定しなければ、いけなかったけどborder-radiusは何時の間にか、なくても動くようになっていた。。。

ちなみに、「-webkit-」や「-moz-」とかは、ベンダープレフィクスというらしい。↓