css3意外と使ったことがない人が多い水平・垂直方向の丸まりの違う角丸の書き方はご存知ですか?そんな角丸を使ったプチテクニックをご紹介。角丸でできること4つ角の指定方法のおさらい水平・垂直方向をバラバラに指定する方法へたうま手書き風かどまる!角丸でできること早く手書き風角丸を知りたい方はこちら一般的な角丸の使い方はこんな感じサンプルを別画面で開くちょっとだけ角を丸めるものから、円にしてしまうもの、その中間と使い方は様々ですがこの辺りはあまり説明がいらないと思うのですっ飛ばします。75px;}4つ角の指定方法のおさらい改めて説明するのもなんですが、border-radiusの記述方法の初歩をおさらいしておきましょう。順序で角丸の大きさを指定します。{border-radius:30px;}全部同じ値の場合は1つにまとめて書くことをお勧めします。水平・垂直方向をバラバラに指定する方法floatは使わずにmarginだけで操作をします。40px;}もっとまとめるショートハンドの記述もありますが、混乱するといけないので今は割愛しておきましょう。これをうまく組み合わせると手書き風の不規則な角丸が作れます。水平・垂直方向をバラバラに指定する方法floatは使わずにmarginだけで操作をします。40px;}うまく数値を変えていけばこんな風に手書き風にすることも可能なのでぜひ使ってみてください。60ビューaboutはむすけ自然と動物が大好きなWebクリエイター。front-endが専門領域ですが動物の知識はそれ以上。