CSS：CSS3で画像や要素を角丸にして表示する「border-radius」

CSS3の「border-radius」プロパティを使用すると画像や要素を角丸にして表示することができます。

今までは要素などを角丸にしたい場合、角丸の画像を作成して表示するなどしていました。
「border-radius」プロパティを使用すればCSSの記述だけでOKです。

また、指定した箇所のみに角丸を適用することも可能です。

下記にCSS3の「border-radius」プロパティを使用した時の方法をメモします。

■ 「border-radius」の使用方法

【CSS】

.border_radius {
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

【HTML】

要素に角丸を指定する場合

<div class="border_radius">
表示する内容
</div>

画像に角丸を指定する場合

<img src="./test.jpg" class="border_radius">

■ 指定した箇所のみに角丸を適用

下記のように細かく指定することも可能です。

border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;

※「/」を使用しない場合は水平方向と垂直方向が同じ値になります。

border-radius: 10px 10px 10px 10px;

また、それぞれの角ごとに指定することも可能です。

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

角丸を使用したデザインは色々な箇所で使用する時が多いと思うので、
border-radiusを使用するとコーディングが楽になるかもしれないです。

raining