とある技術者の備忘録的情報

CSSで背景画像を使わず角を丸くする

  • このエントリーをはてなブックマークに追加

ボックスの角を背景画像を使わずに丸くする方法をメモ。
これは、以下のようにborder-radiusプロパティにて実現可能。

border-radius:8px;

とても簡単である。これは次のように、borderプロパティによる枠線や、background-colorプロパティによる背景色指定と併用して使う。

■枠線を引いて、その枠線の角を丸くする

border: 3px solid blue;  /* 枠線を引く */
border-radius:8px;       /* 角丸のサイズ指定 */

■背景色をつけて、そのボックスの角を丸くする

background-color: blue;  /* 背景色の指定 */
border-radius:8px;       /* 角丸のサイズ指定 */

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク