最近はCSSで角丸を表現する事が非常に増えてきました。
昔は画像で作成して…という流れだったのですが、CSS3になってからはできるだけ画像を使わない方向なんですよね。CSSは色々な表現ができるようになっているので、CSSを書くのが楽しいです。

CSSで角丸を作る書き方ってなぜか忘れてしまう。

角丸の書き方ってついつい忘れがちになってしまいます。なので、今回は自分のコピペ用に角丸パターンをいくつか作っておきました。使いたい人は遠慮なく使ってくださいませ。

今回はBOX（ボーダーを引いているdiv）と角丸用のCSSに分けて作成しました。
いちいち角丸の指定をdiv毎に書くのは面倒ですし、最近の書き方はこんな感じかな…と。

html

css

上だけ角丸、下だけ角丸などなど、色々なパターンに分けておきました。「html」内で指定している「kadomaru」を他のクラスに書き換えればそのまま使用できます。このようにしておくと、使いたい時に必要な部分だけ書けばいいので楽ですよね。

borderのスタイルを点線などにも変更できます。

CSSコピペ専用！角丸を簡単に使用するメモ　まとめ

今回はCSSを使って角丸を表現したい時の書き方をメモ程度にまとめてみました。
CSSの書き方は色々あるし、ブラウザによって依存したりする事もあるので、CSSを使う時は必ず主要ブラウザのチェックを忘れないようにしましょう。