CSSでボーダーの角を丸める・歪める方法/border-radiusプロパティの使い方

borderの角っちょを丸くするborder-radiusの使い方です。実は有機的なデザインを実現する上で、非常に重要なプロパティでもあります。

数字が増えればそれだけ丸くなる

基本的な使い方としては、borderのの下にでも下記コードを追加するだけです。

角を丸める
border-radius: 値;

ではさっそくこちらの四角形に対して、border-radiusを適用してみたいと思います。

↓

//CSS
border:solid 1px black;
height:200px; 
width:500px;
border-radius:10px;

//CSS
border-radius:2em;

//CSS
border-radius:50rem;

//CSS
border-radius:10%;

//CSS
border-radius:30%;

//CSS
border-radius:90%;

%とそれ以外で挙動は変わりますが、ある程度丸まるとあとはいくら数字を増やしても同じです（行が増えれば結果は変わりますが）。
ここまでが基本的な、四隅を同時に指定する使い方です。

数字を増やせば、左上→右上→右下→左下の順に適用されます。

//CSS
border-radius:10% 20% 30% 40%;

なお、4つのうち一番最後の（左下の）数字が省略された場合は右上と同じ数値になり、2～3番目の数字（右上・右下）が省略された場合は左上と同じ数値になります。

たとえばこんな感じになります。

//CSS
border-radius:10% 40% 80% 60%/99% 10% 99% 10%;

この数値は、/の左側が左上・右上・右下・左下の横からの距離、右側が左上・右上・右下・左下の縦からの距離です。
左上で言うと、横から25em、縦から11emの位置を中心点にした丸を描いて、その外縁の軌跡に沿った形に角が丸められます。

10px/10px

50px/10px

100px/10px

対象を正方形にすれば完全な円形も作れますし、JavaScriptと組み合わせることで回転する楕円形やうねうね動く四角形を実装することも可能です。

画像だとこんな感じになります。