CSS(border-radius)で作る手書き風かどまる

角丸でできること

一般的な角丸の使い方はこんな感じ

ちょっとだけ角を丸めるものから、円にしてしまうもの、その中間と使い方は様々ですがこの辺りはあまり説明がいらないと思うのですっ飛ばします。

/* 一番左 */
#sample div {
	width: 200px;
	height: 200px;
}
#sample div.r10 {
	border-radius: 10px;
}
/* 真ん中 */
#sample div.r100 {
	border-radius: 100px;
}
/* 一番右 */
#sample div.r75 {
	border-radius: 75px;
}

４つ角の指定方法のおさらい

改めて説明するのもなんですが、border-radiusの記述方法の初歩をおさらいしておきましょう。

CSSはこんな感じ

/* 角丸の大きさ （px、%などの単位で指定が可能） */
/* 左上、右上、右下、左下の順序で角丸の大きさを指定します。 */

/* 角丸なし */
.sample div {
	border-radius:0;
}
/* 左上だけ角丸 */
.sample div {
	border-radius:30px 0 0 0;
}
/* 右上だけ角丸 */
.sample div {
	border-radius:0 30px 0 0;
}
/* 右下だけ角丸 */
.sample div {
	border-radius:0 0 30px 0;
}
/* 左下だけ角丸 */
.sample div {
	border-radius:0 0 0 30px;
}
/* 全部角丸 - ショートハンド */
.sample div {
	border-radius:30px;
}

全部同じ値の場合は１つにまとめて書くことをお勧めします。

水平・垂直方向をバラバラに指定する方法

floatは使わずにmarginだけで操作をします。

CSSはこんな感じ

/* 水平方向（左上・右上・右下・左下）　/　垂直方向（左上・右上・右下・左下） */
.sample div {
	border-radius:100px 20px 30px 70px / 20px 60px 40px 40px;
}

もっとまとめるショートハンドの記述もありますが、混乱するといけないので今は割愛しておきましょう。
これをうまく組み合わせると手書き風の不規則な角丸が作れます。

水平・垂直方向をバラバラに指定する方法

floatは使わずにmarginだけで操作をします。

CSSはこんな感じ

/* 水平方向（左上・右上・右下・左下）　/　垂直方向（左上・右上・右下・左下） */
.sample div {
	border-radius:100px 20px 30px 70px / 20px 60px 40px 40px;
}

うまく数値を変えていけばこんな風に手書き風にすることも可能なのでぜひ使ってみてください。