Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

Web

簡単に角丸が作れるborder-radiusが素敵!

投稿日:

簡単に角丸が作れるborder-radiusが素敵!

CSS3の角丸が出来るようになって以前みたいに画像を作ることはなくなりました。
border-radiusというプロパティが角丸を簡単に出来るようにしてくれました。

border-radiusがなかったとき

角丸border-radiusがないとき

border-radiusがないときは、上記のようなデザインがあってHTMLで組むときは

角丸の作り方

赤枠で囲ったところを画像で書き出して3つぐらいの<div>でくくって角丸のデザインのコーディングをしていました。なんで上下の画像を書き出して作るのか?というと文字が増えたときに困るからです。文字が貫通したりするので角丸のコーディングは大変でした。

さらに角丸+中にグラデーションなんか入れられたら<div>だらけになってました。
当時、デザイナーさんに「角丸+グラデーションのデザインは極力やめてください」ってお願いしていました(笑)

border-radiusの記述方法

角丸ボックス

角が20pxの角丸ボックスを作るCSSは、

.kado {
	border-radius: 20px 20px 20px 20px;
}

このようになります。

角丸ボックス

順番は、左上から右上、右下から左下の順です。
例えば、右上だけど30pxの角丸にしたかったら二番目の数値を30pxと記述するだけです。

すべての角丸が一緒なら一つにまとめることが出来ます。

.kado {
	border-radius: 20px;
}

だけでもOKです。

今まで画像を切り出して、大変な想いをして作ってた角丸ですが簡単になってコーディングの作業スピードが上がりました。中にグラデーションが入ってても大丈夫なのでドンと来いですね!

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-Web

Copyright© Sedori Plan , 2019 All Rights Reserved.