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

目次
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 を指定しています。