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

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

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

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

ではさっそくこちらの四角形に対して、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の位置を中心点にした丸を描いて、その外縁の軌跡に沿った形に角が丸められます。

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

border以外の要素に実装してみる

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

CSSで画像の縁を丸める、画像を丸く表示する方法/boder-radiusの使い方（画像編）

名称から枠を丸めるのに使うイメージのあるborder-radiusですが、実は画像を丸めるのにも使えます。

sunagitsune.com

2019.04.10

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

sunagitsune.com

2019.01.27