段落を設定する(背景を角丸にする)

段落を設定する(背景を角丸にする)の表示例

段落の背景を角丸にします。
「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;

値の数と適用範囲

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

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

HTML/XHTML

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

<p class="round1">秋の田のかりほの庵の苫をあらみ わが衣手は露にぬれつつ</p>
<p class="round2">春過ぎて夏来にけらし白妙の 衣干すてふ天の香具山</p>
<p class="round3">あしびきの山鳥の尾のしだり尾の ながながし夜をひとりかも寝む</p>
<p class="round4">田子の浦にうち出でて見れば白妙の 富士の高嶺に雪は降りつつ</p>
<p class="round5">奥山に紅葉踏み分け鳴く鹿の 声聞く時ぞ秋は悲しき</p>
<p class="round6">鵲の渡せる橋に置く霜の 白きを見れば夜ぞ更けにける</p>

CSS記述例

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

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

段落を設定する(背景を角丸にする)の表示例

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