要素に境界線をつけるには、borderプロパティを指定しますが、そのままでは全ての角が直角になるので、四角形が並んだ画一的なデザインになってしまいます。
市役所のホームページなど、オリジナリティや躍動感のあるようなデザインよりも、多くの人にとって見やすいレイアウトであることが重要視されるケースでは、あえて画一的なデザインが採用されていることもありますが、個人や企業のホームページが役所っぽかったら面白みや独創性に欠けてしまいます。
例として、下の２つの見出しを見比べてみましょう。
お堅い感じの見出し
個性的な見出し
いかがでしょうか？
もちろん、お堅い感じの見出しがダメということは決してありません。無難なデザインですが読みやすく、老若男女問わず多数の人に受け入れられやすいという、大きなメリットがあります。
ただ、あえてデメリットも付け加えるならば、無難すぎて印象に残りにくい・目を引きにくいとも言えてしまいます。
一方、個性的な見出しは、好き・嫌いの好みが分かれる可能性は高くなってしまうものの、個人や企業の個性・イメージを表現できて、見た人の記憶に残りやすいという特徴があります。
整然とした無難なWebサイトは、CMSのテンプレートをそのまま利用すれば良いですし、今後さらに技術開発が進めば、より誰でも簡単にWebサイトが作成できるようになることが予想されます。
そういった意味でも、無難すぎず、ターゲット層の人の心に響く個性的なWebサイト制作はとても大事で、強みになります。
というわけで、今回は境界線の角に丸みをつけて柔らかい雰囲気にしたり、個性的な形にするCSSプロパティをご紹介します！
用語解説：CMS（シーエムエス）
今回紹介するCSSプロパティは、border-radiusプロパティです。
複雑な形にするには少し細かい指定が必要ですが、角を丸くするだけならとても簡単ですよ！😀
４つの角を同じだけ丸くする
まずはborder-radiusプロパティの基礎からいきましょう！
第１ステップとして、４つの角を全て同じだけ丸くする…という調整をしていきます。
４つの角を全て同じだけ丸めるには、次のようにborder-radiusの値を1つだけ設定します。
＊４つの角を丸める調整＊
■セレクタ { border-radius: 丸めたい半径の数値+単位（px,%など）; }
たとえば50％と指定したら、四隅がそれぞれ半径50％丸められる→隣接する角を足すと合計100％となってまん丸になる…ということになります。
四隅の一括指定の場合、50を超える数値＋％で指定しても、それ以上には丸まらないということですね。
こういうのは、文章を読んで理解するよりも、実際に自分で設定してみた方が分かりやすいので、border-radiusの値を自由に変更して遊べる機能を用意しました。
単位はpxと％を選ぶことができます。
四隅が全て一律に、入力した数値に応じて丸められることが確認できたかと思います。
ちなみに、試した方もいるかもしれませんが、負の値は無効です。
角を丸めることで、やさしい・穏やか・温和といったイメージを与えることができます。
強烈な・力強いメッセージを伝えたい場合は、角張った形の方が勢いがあり、親近感・親しみやすさを感じさせたい場合は角を丸めるとイメージに合います。（下のサンプルを参照下さい）
超!激安SALE!!
★news★お知らせ
▲のサンプルはpタグにborder-radiusを設定していますが、border-radiusプロパティは基本的に、どんなタグにでも設定することができます。
なので、入力フォームを丸めることもできます↓（丸め過ぎると入力しづらくなるので注意！）
POINT!
- ・要素の４隅を均一に丸めるには、border-radiusの値を１つ指定する！
- ・値は、数値＋単位で指定する！
- ・divタグやpタグなどに限らず、ほとんどのタグに適用させることが可能！
角の丸みを個別に指定する
角の丸め具合は、４つの角が全て同じように丸まってほしいケースの方が多いですが、時として角によって丸め具合を変えたい…という場合もあります。
単にちょっと変わった形にしたいという場合もですが、以下のようなタブ付きボックスを作りたい場合などに役立ちます。
▲サンプルのタブ（tab）部分の右下と左下の角にご注目下さい。ここだけ角が丸まらずに、下の「text」と書かれたボックスに直線で繋がっています。
もしこの部分まで丸めてしまったら、サンプルのように直線で下のボックスにつながりません。
このように、角の丸め具合を角の位置によって変えることで、ボックスのデザインの幅をより広げることができます。
角を個別に指定するには、border-radiusに値を複数指定する必要があります。
１左上の角 ２右上の角
４左下の角 ３右下の角
…の順で指定します。具体的な記述例は以下です。
＊４つの角の丸め具合を個別に指定＊
{ border-radius: 10px 5px 15px 0 ; }
負の値は無効ですが、０の値を指定することで、角を丸めないことは可能です。
また、４つの角を一括で指定する場合は隣接する角も同じ数値になるため、50％と設定したら合計100％となり、それ以上には丸まらないのですが、個別に指定する場合は隣接する角の値が関係なくなるので、50％を超える値を設定するとさらに丸まります。
色々説明しましたが、結局のところそれぞれ値を指定したらどんな感じになるのか、実際に試してみるのが手っ取り早いです。
ということで、個別に値を設定できる機能を用意しました。思う存分、試して下さいね！
ちなみにですが、以下のように値を２つだけ指定した場合、
{ border-radius: 10px 40px; }
この場合は、左上と右下の角＝半径10px・右上と左下の角＝半径40px…で角が丸められます。
値が２つの場合、左上＆右下・右上＆左下の対角にそれぞれ値が適用されるということです。
また、以下のように値が３つの場合、
{ border-radius: 10px 40px 0; }
この場合は、左上の角＝半径10px・右上と左下の角＝半径40px・右下の角＝0（丸まらない）…という調整になります。
ただし、同じ結果が得られるとしても、値を３つだけ指定するより４つ指定した方が分かりやすいです。
コーディング効率もさほど変わらないですし、省略できる場合でも基本的に値を４つ指定しておく方が良いと思います。
POINT!
- ・border-radiusに複数の値を指定することで、４つの角の丸まりを個別に指定することも可能！
- ・左上・右上・右下・左下の順に値を指定する！
- ・値は２つや３つでもOKだが、分かりやすいのは４つ指定する方法！
横の半径と縦の半径
ところで、border-radiusの値は「丸める半径」を指定するものでしたが、半径には２種類あります。
それは、横の半径と縦の半径です。まずは下の図形をご覧ください。
半径には赤い横線と、青い縦線があるというのが分かります。
これまでに紹介してきた角を丸める調整方法は、横と縦の半径が全く同じ（10pxなら横も縦も10pxの半径）でしたが、実は横と縦の半径の比率を変えることができます。
以下のようにborder-radiusの値を／（スラッシュ）で区切ることで、横の半径／縦の半径…というふうに設定することができます。
＊横の半径と縦の半径を別にする＊
{ border-radius: 10px / 20px; }
繰り返しになりますが、／の前（先に指定する値）が横の半径で、／の後に指定する値が縦の半径です。
それでは、サンプルコードと表示結果を見てみましょう！
<div class="sample_box"></div>
.sample_box {
width: 200px;
height: 100px;
background-color: green;
border-radius: 10px / 30px;
}
サンプルでは、border-radius: 10px / 30px としているので、縦の半径の方が大きい指定になっています。
なんとなーく、「縦に長い丸み」になっているのが分かるかと思います。
そして毎度のことですが、値を自由に変更できるサンプルも用意しているので、どのように変形するか遊んでみてください！
＊横と縦の半径、どちらの値も1以上の値を指定する必要があります。
POINT!
- ・角の丸みをつける半径には、横と縦の２種類がある！
- ・border-radiusの値を／（スラッシュ）で区切ることで、半径を別々に設定できる！
- ・／の前が横の半径、／の後が縦の半径になる！
4つの角と横・縦の半径を個別に設定
半径には横と縦の２種類があり、そして四角形の角は４つあります。
…ということは最多で、２×４＝８つの値を取ることが出来るということになります。
左上の角の横の半径・縦の半径、右上の角の横の半径・縦の半径…といった具合ですね。
ここで復習ですが、４つの角を個別に設定する場合の値の順番は、
①左上 ②右上 ③右下 ④左下 でした。
そして、横と縦の半径の値の順番は
①／（スラッシュ）の前が横 ②／の後が縦の半径 でしたね。
ここからが本題です。「／（スラッシュ）の前に値を４つ、／の後に値を４つ指定すると、どういうことになるか？」
もうお分かりかと思いますが、答えは、左上→右上→右下→左下の角の順番に、／（スラッシュ）の前の値が横の半径に、／の後の値が縦の半径になる…ということになります。
つまり、４つの角の、さらに横の半径と縦の半径を個別に設定するには、以下のような記述をします。
＊４つの角とそれぞれの半径を個別に指定＊
{ border-radius: 50px 20px 0 150px / 20px 50px 0 20px; }
それでは、サンプルコードと表示結果です。
<div class="box1"></div>
.box1 {
width: 200px;
height: 150px;
background-color: green;
border-radius: 50px 20px 0 150px / 20px 50px 0 20px;
}
このように、４つの角を個別に指定するだけでなく、さらに横と縦の半径を分けて設定することにより、かなり複雑な形も作り出すことができます。
…作るのがとても面倒くさかったのですが笑、それぞれの値を変更できる機能をここでも用意したので、色んな組み合わせを試してみてください！
＊上の４つが横の半径、下の４つが縦の半径です。そして左から順に、左上・右上・右下・左下の角となっています＊
POINT!
- ・４つの角に、それぞれ横と縦の半径を個別に設定できる！
- ・左上→右上→右下→左下の角の順と、／（スラッシュ）の前が横の半径、／の後が縦の半径というのは、他の調整方法と同じ！
