border-radiusで角を丸くしてみよう！角丸プロパティの使い方

ま

る

す

ぎｗ

可愛すぎるプロパティ、「border-radius」。

背景や画像の角を丸くしたいときに使います。
世間では「角丸」なんて呼ばれて可愛がられていますが、とくに画像編集などを使わなくともCSSで簡単に実装できるのは嬉しい限り。

「border-radius」、最高です。

例えば↑背景の角を丸めたり、

左記のような写真や画像を丸めたいときに使います。

どの程度丸めるのかは自由に調節でき、丸めすぎると、↓丸になります。

もう想像しただけでこの便利さが伝わるはず。

当ブログのフッターでも使っていますが、どう考えても神がかっています。

では使い方。

border-radiusで角の丸さを指定

HTMLのstyle属性、あるいはCSSにborder-radius: ;を記述します。
そして20px、20％などの単位で丸さを調節。

コードの例

■画像を丸くする
<img border="0" height="400" src="画像のＵＲＬ" style="border-radius: 40px;" width="266" />

■背景の角を丸くする
<div style="background-color: #cccccc; border-radius: 20px; font-size: 30px; padding: 20px;">
border-radius: px、em、％などで調節 ;
</div>

■一部の角を丸くする
<div style="background-color: yellow; border-top-right-radius: 20px; font-size: 20px; padding: 20px;">
右上　border-top-right-radius<br />
左上　border-top-left-radius<br />
右下　border-bottom-right-radius<br />
左下　border-bottom-left-radius
</div>

■完全な丸にする
<div style="background-color: lime; border-radius: 100%; height: 100px; width: 100px;">
</div>

■表の角を丸くする
<table width="400" bgcolor="white" style="border:2px solid gray;border-radius: 10px;" cellspacing="0" cellpadding="10"><tbody><tr>
<td width="200" style="border-right:2px solid #cccccc;">
りんごの値段
</td>
<td width="200">
１００円
</td>
</tr>
<tr>
<td width="200" style="border-top:2px solid #cccccc;border-right:2px solid #cccccc">
みかんの値段
</td>
<td width="200" style="border-top:2px solid #cccccc;">
２００円
</td>
</tr>
<tr>
<td width="200" style="border-top:2px solid #cccccc;border-right:2px solid #cccccc">
メロンの値段
</td>
<td width="200" style="border-top:2px solid #cccccc;">
１,０００円
</td>
</tr></tbody></table>

↓

表示サンプル

■画像を丸くする

■背景の角を丸くする

border-radius: px、em、％などで調節 ;

■一部の角を丸くする

右上　border-top-right-radius
左上　border-top-left-radius
右下　border-bottom-right-radius
左下　border-bottom-left-radius

■完全な丸にする

■表の角を丸くする

りんごの値段	１００円
みかんの値段	２００円
メロンの値段	１,０００円

ＦＣ２ブログで使うには？

ＦＣ２ブログでは、古いテンプレートの場合はborder-radiusが使えないケースがあります。その場合、テンプレートの互換モードをIE9にします。

ＦＣ２ブログのテンプレートを開き、上記のmetaタグを<head>内に追記しましょう。

思い出せ.com

ラベル