---

CSS3で実現できる、角丸ボックスのサンプルです。
プロパティに-webkit-border-radiusと記述します。（Safariの場合）

---

<div class="boxA">
	<h2 class="title">角丸サンプル</h2>
    <div class="boxB">
    	<p>タイトル部分に背景画像を入れて角丸にするサンプルです。</p>
        <p>角丸の画像を個別に用意しなくてもいいので使い回しができます。</p>
    </div>
</div>

---

div.boxA {
	width: 300px;
	margin: 10px;
	padding: 0px;
	border: 1px solid #E5E5E5;
	background-color: #FFFFFF;
	-webkit-border-radius: 10px;
}

div.boxB {
	padding: 10px;
}

h2 {
	background-image: url(../images/h2bg.gif);
	background-repeat: repeat-y;
	padding: 10px;
	color: #ffffff;
	font-size: 13px;
	font-weight: bold;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
}

---

まず、boxAのdivの四隅に角丸10pxを指定。そして、h2の左上・右上だけに角丸を指定。

---

---

h2の背景画像に、長方形の小さな画像をrepeat-yで縦方向に繰り返し表示。

---

そして、本文部分にpaddingを指定。

---

ちなみに、boxAにpaddingを10px指定すると、こうなります。

---

---

角丸の大きさを変えるには、-webkit-border-radiusの値を変更するだけなので、とても簡単です。

---

関連タグ：css