CSSで指定する見出しデザイン　border　枠

見出しに共通の基本CSS

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

　

枠線をまとめて指定する時は　
border : 1px solid #cc0000; (線の太さ 線の種類 線の色) 。
四辺それぞれに違う設定をする時は
border-top、border-right、border-bottom、border-leftを使う。

左に10pxの赤い実線

.box1{
border-left:10px solid #cc0000;
}

上と下に1pxの赤い実線

.box2{
border-top:1px solid #cc0000;
border-bottom:1px solid #cc0000;
}

左に10pxの赤い実線、下に1pxの赤い破線

.box3{
border-bottom:1px dashed #cc0000;
border-left:10px solid #cc0000;
}

下に3pxの赤い破線

.box4{
border-bottom:3px dashed #cc0000;
}

下に3pxの赤い点線

.box5{
border-bottom:3px dotted #cc0000;
}

下に3pxの赤い二重線

.box6{
border-bottom:3px double #cc0000;
}

左は10pxの赤い実線、残り３辺は1pxの赤い実線で囲む。

.box7{
border-top:1px solid #cc0000;
border-right:1px solid #cc0000;
border-bottom:1px solid #cc0000;
border-left:10px solid #cc0000;
}

右は10pxの赤い実線、残り３辺は1pxの赤い実線で囲む。

.box8{
border-top:1px solid #cc0000;
border-right:10px solid #cc0000;
border-bottom:1px solid #cc0000;
border-left:1px solid #cc0000;
}

　

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

.box9{
border-top:1px solid #cc0000;
border-right:10px solid #cc0000;
border-bottom:1px solid #cc0000;
border-left:1px solid #cc0000;
display:inline;
}

　
　

バリエーション♪