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を使う。

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

左に10pxの赤い実線

.box1{
border-left:10px solid #cc0000;
}
CSSで指定する見出しデザイン border 枠

上と下に1pxの赤い実線

.box2{
border-top:1px solid #cc0000;
border-bottom:1px solid #cc0000;
}
CSSで指定する見出しデザイン border 枠

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

.box3{
border-bottom:1px dashed #cc0000;
border-left:10px solid #cc0000;
}
CSSで指定する見出しデザイン border 枠

下に3pxの赤い破線

.box4{
border-bottom:3px dashed #cc0000;
}
CSSで指定する見出しデザイン border 枠

下に3pxの赤い点線

.box5{
border-bottom:3px dotted #cc0000;
}
CSSで指定する見出しデザイン border 枠

下に3pxの赤い二重線

.box6{
border-bottom:3px double #cc0000;
}
CSSで指定する見出しデザイン border 枠

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

.box7{
border-top:1px solid #cc0000;
border-right:1px solid #cc0000;
border-bottom:1px solid #cc0000;
border-left:10px solid #cc0000;
}
CSSで指定する見出しデザイン border 枠

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

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

 

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

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

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

 
 

バリエーション♪

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