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

marginとpaddingの違い

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

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

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

サンプル

表示サンプル

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

外枠に線を引いた場合

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

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

サンプル

表示サンプル

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

外枠に線を引いた場合

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

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

サンプル

表示サンプル

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

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

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

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

サンプル

表示サンプル

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

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

border-radiusをHTMLで確認する

border-radiusのHTMLはこちら

border-radiusの使い方動画

//コメントフォームを読み込む
%d人のブロガーが「いいね」をつけました。