[CSS]CSS3のborder-radiusで要素や画像で円形に表示する方法

CSSプロパティ

2013.02.16

CSS3のborder-radiusは要素を角丸にすることができる便利なプロパティで、角丸の値を調整することで、画像や要素を正円（円形）で表示することもできます。

IE7以下でも利用したい場合は（試していませんが）、PIEなどを使えば実現可能かと思います。

要素を正円で表示する
1. HTML の記述例
2. CSS の記述例
画像を円形で（マスク）表示する
1. HTML の記述例
2. CSS の記述例

要素を正円で表示する

まずは最初に、まんまるのオブジェクトをHTMLとCSSで表現します。

HTML の記述例

circle という名前の要素を用意します。

<div class="circle"></div>

1	<div class="circle"></div>

CSS の記述例

CSS3 のborder-radiusを利用してcircle の要素を円にしてみます。

.circle{
    width:100px;
    height:100px;
    background:#cc0000;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
}

.circle{

width:100px;

height:100px;

background:#cc0000;

border-radius: 100px;

-webkit-border-radius: 100px;

-moz-border-radius: 100px;

}

ポイントは、border-radiusの値とcircle の要素の幅、高さの値を同じにすることです。

↓このような感じで表示されます。

画像を円形で（マスク）表示する

上記例の応用として、今度は img タグの画像を円形で表示（マスク）します。

HTML の記述例

imgタグをdivで囲います。

<div class="circle2">
<img src="sample.jpg" />
</div>

</div>

CSS の記述例

CSS3のborder-radiusを利用して、画像を正円でマスクします。

.circle2    {
    width:256px;
    height:256px;
}

.circle2 img {
    width:256px;
    height:256px;
    border-radius: 256px;
    -webkit-border-radius: 256px;
    -moz-border-radius: 256px;
}