【コーディング初心者向け】border-radiusの使い方

今回は「border-radius」の使い方に関しまして、ご説明致します。
「border-radius」とは角丸設定をするためのcssです!!
「border」がついているので、線の設定の際だけに使うと思われている方が多かったので説明致します。

外側の線全体を角丸にします

全体に「border-radiu」を設定した場合。

サンプル

				
外枠に線を引いた場合
			

表示サンプル

このように全体が角丸になります。

外側の線を個別に角丸設定

上だけに「border-radiu」を設定した場合。

サンプル

				
外枠に線を引いた場合
			

表示サンプル

このように上が角丸になります。
「 border-radius:」は「左上 右上　右下　左下」の順番になります。

バックグラウンドカラーを使って角丸にします

全体に「border-radiu」を設定した場合。

サンプル

				
ボックスの背景カラーを入れた場合
			

表示サンプル

このように全体が角丸になります。

バックグラウンドカラーを使って上側だけ角丸にします

上だけに「border-radiu」を設定した場合。

サンプル

				
外枠に線を引いた場合
			

表示サンプル

このように上が角丸になります。
「 border-radius:」は「左上 右上　右下　左下」の順番になります。