ほんっとにはじめての HTML5 と CSS3

今回から数回に渡って、CSS3 の新しいプロパティを使ってみましょう。
まずは、要素の角を「角丸」にする border-radiusプロパティです。

CSSプロパティ	border-radius border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius

参考：CSS Backgrounds and Borders Module Level 3 | 5.1. Curve Radii: the ‘border-radius’ properties

1. CSS の新しいプロパティで装飾したサンプルファイル
2. 角丸を指定する box-shadowプロパティ
   1. 正円は、border-radius:50% で簡単に
   2. 4つの角を別々に指定する事もできます
   3. 角丸は一部だけにする事もOK
   4. 角丸は正円でなく楕円でもOK
3. 角丸にしたい角だけを指定するプロパティ

● 2017年10月：サンプルファイルを変更しました。それに伴い本文も編集しました。

● 2015年02月：1つの角だけ丸くするプロパティが抜けていましたので追加しました。
● 2015年02月：この記事には ベンダープレフィックス（-webkit- などの接頭辞）を使っていましたが、もう不要と判断し記事から削除しました。

CSS の新しいプロパティで装飾したサンプルファイル

前回までの [17-1] 〜 [17-6] までで時々登場したサンプルファイルとほぼ同じ HTMLで、 CSSだけ変えてみたサンプルです。
（クリックで別ウィンドウでサンプルが開きます）

このサンプルでは、CSSの「角丸ボックス」「ボックスシャドウ」「テキストシャドウ」「線形グラデーション」「円形（放射状）グラデーション」を使っています。

サンプルファイルの HTML, CSS ソースコードをブラウザで見るには、
[14-1] ブラウザでソースを表示する を参考にしてください。

角丸を指定する box-shadowプロパティ

サンプルファイルでは、グローバル・ナビゲーション部分の <ul>要素や、 <section>要素、<aside>要素に、角丸の指定をしています。

サンプルのCSSはこんなかんじ。ここでは角丸の半径を12pxにしています。

article > section, aside {
	border:1px solid #ddd;
	border-radius:12px;
	box-shadow:0 2px 5px #eee
	}

角丸は、
border-radius: 数値（単位付き）
border-radius: パーセンテージ（要素の幅や高さに対する）
が基本形です。
「数値」や「パーセンテージ」は、半径 です。
「数値」での単位は、px（ピクセル）、em、rem などが使えます。
「パーセンテージ」は、要素自身の幅や高さに対してのパーセンテージです。

正円は、border-radius:50% で簡単に

1辺に対するパーセンテージを「50％」にすれば、楕円形が簡単にできます。

#sample {
    border-radius:50%;
    }

要素の幅と高さ、どちらに対しても50％の半径という指定です。

ボックスを正方形にすれば、正円も簡単。

#sample {
    background-color:#aec3ee;
    margin:1em 0px;
    line-height:100px; /*高さの指定（テキストを上下のセンターにできます）*/
    width:100px;       /*幅の指定です*/
    text-align:center;
    border-radius:50%;
    }

サンプルファイルでは、見出し要素 <h3> のアタマに装飾として正円を置いています。

#mainContent h3::before {
	content:"";
	display:inline-block;
	vertical-align:text-top;
	width:1.2em;  /*幅の指定です*/
	height:1.2em; /*高さの指定*/
	margin-right:.1em;
	border-radius:50%; /*正円に*/
	/*以下略*/
    }

ここでは 疑似要素「::before」を使っています。
擬似要素「::before」や「::after」は、指定した要素の内側に インライン要素としてコンテンツを生成します。

こうして生成したコンテンツを、border-radius:50%で正円にして、display:inline-block で <h3>内のテキストと並べています。

4つの角を別々に指定する事もできます

4つの角を別々に指定できます。

CSSの指定はこのようになります。

#sample {
	border-radius:10px 20px 30px 40px / 10px 20px 30px 40px;
    }

ピクセルの指定が「10px 20px 30px 40px / 10px 20px 30px 40px」と、8個並んでます。
これは、まず水平方向の半径を、左上から時計回りに指定して、
「/（スラッシュ）」で区切り、次に垂直方向の半径を同じく左上から時計回りにしています。

角丸は一部だけにする事もOK

角を丸くしたくない部分だけ「半径 = 0」にすれば、一部だけ角丸も可能です。

#sample {
	border-radius:30px 0 0 0 / 30px 0 0 0;
    }

#sample {
	border-radius:0 0 30px 30px / 0 0 30px 30px;
    }

「/（スラッシュ）」の前後が同じなら、同じコトを2回書かずに、省略して書くこともできます。

#sample {
	border-radius: 0 0 30px 30px;
    }

角丸は正円でなく楕円でもOK

水平方向と垂直方向の半径を別々に指定するので、楕円でもいいわけですよ。
（まー、楕円の角丸はちょっとイビツで、あまり使わないかもですけど。）

#sample {
	border-radius: 10px 20px 30px 40px / 20px 30px 20px 20px;
    }

図説するとこういう事になってます。

角丸にしたい角だけを指定するプロパティ

楕円で角丸を指定することは、まず無いですよね。
正円での指定なら、4つの角それぞれを指定するプロパティもあります。

左上の角だけ正円にする = border-top-left-radiusプロパティ
右上の角だけ正円にする = border-top-right-radiusプロパティ
右下の角だけ正円にする = border-bottom-right-radiusプロパティ
左下の角だけ正円にする = border-bottom-left-radiusプロパティ

#sample {
	border-top-right-radius:30px;
	}

#sample {
	border-bottom-left-radius:30px;
    border-top-left-radius:30px;
    }

こっちのほうが、数字の羅列が無い。
ですが、2つ以上の角を丸くするときは、プロパティを複数書かなきゃなので、 border-radiusプロパティのほうがラクな場合もあります。
ケースバイケースで使い分けよう。

次回予告

いかがでしたか？　意外に簡単に角丸指定できちゃいますね。
このプロパティができる前は、角丸の画像を背景に貼っていたので、とても便利！

次回はCSSで、ボックスにシャドウをつけてみましょう。
これも簡単で、とっても便利です。

関連記事

• [20] 上付き文字と下付き文字を使おう（sup, sub）
• [19] テキストにルビをつけてみよう（ruby, rt, rb, rp, rtc）
• （ちょっとメモ）CSS の ベンダープレフィックス について
• [18-5] 水玉、ボーダー、チェック柄を作ろう（background-size）
• [18-4] 円形（放射）グラデーションを作ろう (radial-gradient)
• [18-3] テキストにシャドウをつけよう（text-shadow）
• [18-2] 要素にシャドウをつけよう（box-shadow）
• [18-1] 要素を角丸にしよう（border-radius）
• [17-6] メインコンテンツを表す main要素
• [17-5] ヘッダーの header、フッターの footer、連絡先の address要素
• [17-4] ナビゲーションのセクションを表す nav要素
• [17-3] セクショニング要素と見出し要素のルール
• [17-2] セクショニングの article要素、aside要素、section要素
• [17-1] HTML5 の新要素でページ全体を組もう
• （ちょっとメモ）テーブルをレスポンシブ対応させるCSS