08 ホームページ基礎講座　CSS　角丸　border-radius

2020年4月2日 2020年4月2日 Yoshiko先生

box-sizing:border-box;

今回の動画ではarticle にboder:2px solid と線を引いて、横幅700px padding:2em とした時、画面の横幅が700px + 2em になっていて外に膨れていることがわかります。

ここで内側余白のpadding をwidth 内に入れてしまう box-sizing プロパティを使っていますので、ぜひここを一度試してみてください。

article {

       border : solid 2px  #333;
       width:700px;
       padding : 2em;
       box-sizing :border-box;
}

h1  {
    text-align:center;
}

h1.title{
    bcacground-color:#f2852b;
    padding:0.5em;
    border-radius:1em 0 1em 0;
}

h1要素にtitle というclassがついている時、角を丸くするプロパティborder-radius を指定しています。