参考にしたコリスさんの記事はこちらです。

いつものborder-radiusの使い方をおさらい

ふだん使うことが多い角丸の作り方をおさらいしてみます。

まず、div要素に背景色を指定しただけの四角です（コードが長くなるので、paddingとかは省略しますね）。

HTML

<div class="ex-1">Border-Radius:0;</div>

CSS

.ex-1{
background-color:lightcoral;
color: white;
}

角丸にするために、CSSにborder-radius:6px;って書き加えます。

.ex-2{
background-color:lightcoral;
color: white;
border-radius:6px;
}

ボーダーで囲ったりして使うのもかわいいですよね！

.ex-3{
background-color: white;
color: lightcoral;
border: 1px dashed dimgray;
border-radius:6px;
}

そもそもborder-radiusって何なんだろう？

コリスさんのサンプルには、スラッシュ（/）を使ったたくさんの値が書かれています。四隅を均等に丸くする以外の使い方なんてこれまで考えたこともなかったので、この書き方がよくわからなかったのです…。

調べてみたところ、先ほどのborder-radius:6px;って、ほんとうは8箇所の値をまとめて書いているらしいということがわかりました。

説明が難しいので、それぞれの6pxがどこをあらわしているのか、下の色付きのコードと画像をごらんください。

こんなふうに、要素の四隅の丸みの半径を書いていたようです。

ただの角丸の場合は8箇所とも同じ値だから、まとめて書いていたのですね。

落書き風デザインにチャレンジ！

それでは、落書き風デザインのコードをかいてみます！border-radiusの値は、コリスさんのサンプルと同じです。

まず、div要素をピンクのボーダーで囲います。

.ex-4{
background-color: white;
color: dimgray;
border:5px solid lightcoral;
}

コリスさんのサンプルと同じ値で、border-radiusを書き加えたものです。

.ex-5{
background-color: white;
color: dimgray;
border:5px solid lightcoral;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

先ほどのように、対応するところを確認してみます。

こんなふうに、ほそながーーい楕円の半径をかいてデザインしていたんですね。ようやくわかりました。

このテクニック、センスよく使ったらすっごくかっこいいものが作れそうですね！