目次
marginとpaddingの違い
今回は「border-radius」の使い方に関しまして、ご説明致します。
「border-radius」とは角丸設定をするためのcssです!!
「border」がついているので、線の設定の際だけに使うと思われている方が多かったので説明致します。
外側の線全体を角丸にします
全体に「border-radiu」を設定した場合。
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> .box01{ border: 1px solid #ccc;/*外枠の線の設定*/ border-radius: 10px;/*角丸にする設定*/ max-width: 300px;/*最大の横幅の設定*/ margin: 20px auto;/*外側余白の設定*/ padding: 20px;/*内側余白の設定*/ text-align: center;/*ボックス内でのセンター寄せ*/ } </style> <div class="box01"> <p>外枠に線を引いた場合</p> </div> |
表示サンプル
このように全体が角丸になります。
外枠に線を引いた場合
外側の線を個別に角丸設定
上だけに「border-radiu」を設定した場合。
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> .box01{ border: 1px solid #ccc;/*外枠の線の設定*/ border-radius: 10px 10px 0px 0px;/*上部分だけ角丸にする設定*/ max-width: 300px;/*最大の横幅の設定*/ margin: 20px auto;/*外側余白の設定*/ padding: 20px;/*内側余白の設定*/ text-align: center;/*ボックス内でのセンター寄せ*/ } </style> <div class="box01"> <p>外枠に線を引いた場合</p> </div> |
表示サンプル
このように上が角丸になります。
「 border-radius:」は「左上 右上 右下 左下」の順番になります。
外枠に線を引いた場合
バックグラウンドカラーを使って角丸にします
全体に「border-radiu」を設定した場合。
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> .box02{ background-color: #ccc;/*背景カラーの設定*/ border-radius: 10px;/*角丸にする設定*/ max-width: 300px;/*最大の横幅の設定*/ margin: 20px auto;/*外側余白の設定*/ padding: 20px;/*内側余白の設定*/ text-align: center;/*ボックス内でのセンター寄せ*/ } </style> <div class="box02"> <p>ボックスの背景カラーを入れた場合</p> </div> |
表示サンプル
このように全体が角丸になります。
ボックスの背景カラーを入れた場合
バックグラウンドカラーを使って上側だけ角丸にします
上だけに「border-radiu」を設定した場合。
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> .box02{ background-color: #ccc;/*背景カラーの設定*/ border-radius: 10px 10px 0px 0px;/*角丸にする設定*/ max-width: 300px;/*最大の横幅の設定*/ margin: 20px auto;/*外側余白の設定*/ padding: 20px;/*内側余白の設定*/ text-align: center;/*ボックス内でのセンター寄せ*/ } </style> <div class="box01"> <p>外枠に線を引いた場合</p> </div> |
表示サンプル
このように上が角丸になります。
「 border-radius:」は「左上 右上 右下 左下」の順番になります。
ボックスの背景カラーを入れた場合
