Perl Web開発者のHTML・CSS入門

border-radius - ボーダーの角を丸くする - CSS入門【CSS3対応】

ボーダーの角を丸くするにはborder-radiusをスタイルシート(CSS)で設定します。設定するサイズは角丸の半径です。

<div style="border-radius:10px;border:1px solid #ddd;">
  角丸のボーダー
</div>

角を丸くする効果

角を丸くすることで、柔らかさを表現することができます。コンテンツを囲む場合や、ボタンを作成するときに、活用できます。

左上、右上、右下、左下のそれぞれの位置に角丸を設定する

border-radiusを使って、左上、右上、右下、左下のそれぞれの位置に角丸を設定することもできます。指定順は、左上、右上、右下、左下の順です。

<div style="border-radius:10px 10px 10px 10px;border:1px solid #ddd;">
  角丸のボーダー 四隅指定
</div>

上側だけに角丸を設定する

上側だけに角丸を設定してみましょう。

<div style="border-radius:10px 10px 0 0;border:1px solid #ddd;">
  上側だけに角丸
</div>

下側だけに角丸を設定する

下側だけに角丸を設定してみましょう。

<div style="border-radius:0 0 10px 10px;border:1px solid #ddd;">
  下側だけに角丸
</div>

border-radiusはボーダーがない場合でも適用される

border-radiusは、ボーダーという名前が含まれていますが、ボーダーがない場合でも適用されます。背景色を設定してborder-radiusを指定してみましょう。

<div style="border-radius:10px;background:#eef">
  ボーダーがない場合でも適用
</div>