チェックフィールド株式会社

東京 港区 千代田区 中央区 ITの運用管理やコンサルティング・相談・サポートはITコンシェルジュにお任せください

スタッフぶろぐ

このエントリをはてなブックマークに登録

F初心者にやさしいHTML講座:角丸にする

今回は四角い枠の角を丸くする表現、
通称「角丸」といわれるスタイルの指定方法をご紹介します。

border-radiusプロパティを使います。

※こちらのスタイルは最新のブラウザを利用していないと表示できない場合があります。


<div style="width:300px; height:100px; background-color: aqua; border-radius:20px;">角丸</div>

出力結果

角丸

角丸半径の値は、長さかパーセンテージで指定します。
表現がやわらかくなりますね。

枠線とあわせると目立った印象のスタイルを作成できます。


<div style="width:200px; height:200px; border:10px solid green; background-color: coral; border-radius:40px;">角丸</div>

出力結果

角丸

是非ご利用ください。

▼関連するタグや属性はこちらを参考にしてください。
http://www.htmq.com/css3/border-radius.shtml