色々出来すぎるだろ…角丸を場所で変えたりスゲエな
目次(クリックでジャンプ)
基本的な使い方
border-radiusはblockの角を丸める半径を指定します。
指定しない場合はこう
「border-radius:10px;」と指定すると、角がまるくなる。
指定する単位はpx(ピクセル)以外でも良く、例えば親要素の文字の大きさ(em)を使って「border-radius:1em;」と指定すると、こうなる。
ここまでは角の丸みは正円の1/4弧だったが、「%」で指定するとブロックの幅と高さを基準に、楕円形に丸まる。「border-radius:20%;」と指定すると、こうなり…
「border-radius:50%;」と指定すると、完全な楕円になる。
応用的な使い方
場所によって丸める半径を変えることもできる。まとめて指定する時は、左上→右上→右下→左下 の順に指定する。「border-radius:0px 10px 25px 50px;」と指定するとこう
数値を2つだけ指定すると、左上と右下→右上と左下 を指定したことになる。「border-radius:10px 30px;」と指定するとこう
スタイルシートでの指定をインラインで修正するような場合は、位置をピンポイントで指定する。左上は「border-top-left-radius」、右上は「border-top-right-radius」、右下は「border-bottom-right-radius」、左下は「border-bottom-left-radius」になる。「border-radius:1em;」を指定したあと「border-bottom-left-radius:2em;」を指定すると、こうなる。
発展的な使い方
%指定で楕円形に丸まりましたが、もっと細かくしてすることができます。「4箇所の横半径/4箇所の縦半径」の形式で指定します。「border-radius:0.5em 1em 1.5em 2em/2em 1.5em 1em 0.5em;」だとこうなります。
歪んだような面白い形を作ることができますね。