CSSで指定する見出しデザイン　border-radius　角丸

見出しに共通の基本CSS

.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8{
padding:10px 30px;
margin:30px 0px 0px;
font-weight:bold;
}

border-radius:○px;　で全ての角の丸みをまとめて指定。
それぞれ指定する時は　border-radius:左上の角、右上の角、右下の角、左下の角。

枠線の太さは2px、角の丸みは10px

.box1{
border:2px solid #cc0000;
color:#cc0000;
border-radius: 10px;
}

文字白抜きで。角の丸みは20px

.box2{
background-color:#cc0000;
color:#ffffff;
border-radius: 20px;
}

右だけ角丸
border-radius:左上の角、右上の角、右下の角、左下の角

.box3{
background-color:#cc0000;
color:#ffffff;
border-radius: 0px 20px 20px 0px;
}

インライン要素で使って。
※スマホなど幅が狭いと改行して表示がおかしくなるので短いテキストでのみ使用。

.box4{
background-color:#cc0000;
color:#ffffff;
border-radius: 0px 20px 20px 0px;
display:inline;
}

バリエーション♪