見出しをCSSで装飾する(背景を角丸にする)

見出しをCSSで装飾する(背景を角丸にする)表示例

見出しの背景を角丸にするには「border-radius」というプロパティを使います。IE8以前やFx3.6は非対応です。Fx3.6は「-moz-border-radius」プロパティを使うことで可能になります。

border-radius: 30px;
border-radius: 10px 30px;
border-radius: 5px 15px 30px;
border-radius: 5px 15px 25px 35px;

値の数と適用範囲

見出しをCSSで装飾する(背景を角丸にする)「border-radius」プロパティの値の個数によって角丸にする場所の適用範囲が決まっています。プロパティの値は円の半径です。

値が1つ
すべての角丸の値を指定します。
値が2つ
「左上と右下」、「右上と左下」の角丸の値を指定します。
値が3つ
「左上」、「右上と左下」、「右下」の角丸の値を指定します。
値が4つ
「左上」、「右上」、「右下」、「左下」の角丸の値を指定します。

HTML/XHTML

<body> ~ </body>内に以下を記述します。

<h1 class="round1">見出しh1に「round1」の角丸にする</h1>
<h1 class="round2">見出しh1に「round2」の角丸にする</h1>
<h1 class="round3">見出しh1に「round3」の角丸にする</h1>
<h1 class="round4">見出しh1に「round4」の角丸にする</h1>
<h1 class="round5">見出しh1に「round5」の角丸にする</h1>
<h1 class="round6">Fx3.6対応</h1>

CSS記述例

<head> ~ </head>内に以下を記述します。

<style type="text/css">
<!--
h1 { padding: 30px; background: #DDD; }
h1.round1 { border-radius: 10px; }
h1.round2 { border-radius: 30px; }
h1.round3 { border-radius: 10px 30px; }
h1.round4 { border-radius: 5px 15px 30px; }
h1.round5 { border-radius: 5px 15px 25px 35px; }
h1.round6 {
-moz-border-radius: 30px;
border-radius: 30px;
}
-->
</style>

見出しをCSSで装飾する(背景を角丸にする)表示例

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録