へたうま手書き風、角丸（border-radius）

ところでborder-radiusって？

今はすっかりほとんどのブラウザで対応されている角丸を書くためのＣＳＳ3の記述方法です。

こんな感じで、角っこに丸みを付けることができます。

実際どこをどう書けばどの部分が角丸になるのか下のボタンを押しておさらいしてみましょう

div {
	border-radius:15px　15px　15px　15px;
	 /* 角丸の大きさ （px、%などの単位で指定が可能） */
	 /* 左上、右上、右下、左下の順序で角丸の大きさを指定します。 */
}

ここまでは結構良く使われているので、ほとんどの方が普通に使ってたりします。

だが、しかぁぁぁし！
実はリファレンスサイトにしっかり書いてあるのに、結構忘れられている書き方があるんです！（大袈裟）

角丸の水平方向と・垂直方向を別々に指定することができるんです。（ドヤ顔）
実際のソースの例はこんな感じ

.sample div {
	border-radius:100px 20px 30px 70px / 20px 60px 40px 40px;
	background-color:#FFB5A5;
}

水平方向（左上・右上・右下・左下）　/　垂直方向（左上・右上・右下・左下）　の順番に書きます。
※実際はショートハンドの書き方もありますが、混乱しそうなので今回は全て書きます

これをうまいこと使うと、へたうまな手書き風の枠組みなんかもつくれちゃうって寸法なのです。