種類、太さ、色を一度に指定できる border という属性は短縮した書き方で、3つに分けて書くことで、margin や padding の様に上下左右別々に指定できるのです。
その属性は次の3つです。
border-width border-style border-top-color
線の太さを場所によって変えるときには，次のように指定します。
p {
padding: 0.5em 1em 0.5em 1em;
border:solid #00ffff ;
border-width:2px 0px 0px 1em;
}
border に書いた太さ指定をやめ，新たに border-width を使うと，上右下左のいつもの順で太さを別々に指定できます。
線の種類は指定しないと書いてくれません。色は指定しないと文字の色と同じになります。
次は border-width:0 1em 0 3em;と指定した例です。
ここに薄い背景色を配置して見出しに使うのもいいでしょう。。
次は border-width:4px 0 4px 0;と指定した例です。
長い文章を囲むときに、上下左右全部を囲むのではなく、上下だけにする
次は 左だけ2本の線を入れる例です。
この場合のスタイルシートの記述は
次のようにします。
border:double #999999;
border-width:0 0 0 6px;
線の色も同様な方法で場所によって変えることができます。次のように指定します。
p {
padding: 0.5em 1em 0.5em 1em;
border:solid 4px;
border-color:#ff9900 #ff0000 #0099ff #0000ff;
}
border に書いた太さ指定をやめ，新たに border-width を使うと，上右下左のいつもの順で太さを別々に指定できます。
線の種類も同様な方法で場所によって変えることができます。次のように指定します。
p {
padding: 0.5em 1em 0.5em 1em;
border:8px #0099ff;
border-style:solid dotted dashed double;;
}
border に書いた太さ指定をやめ，新たに border-width を使うと，上右下左のいつもの順で太さを別々に指定できます。
全部をそれぞれ4つにして指定することももちろんできます。次のように指定します。
指定の仕方は枠の中に書いてあります。color,styleは、上下と左右がそれぞれ同じになる省略形を使っています。
上下のドットの位置が合うかどうかは見る人のブラウザのWindowの幅によります。
border-width:16px 4px 16px 30px;
border-color:#9900ff #009900;
border-style:dotted solid;
border-width border-color border-style 3つを使うより、border-top border-right border-bottom border-left を使ったほうが指定しやすいかもしれません。
border-top :double 6px #00cccc; border-right :dotted 2px #99ffff; border-bottom:solid 3px #009999; border-left :ridge 8px #000000;
特に上しかいらないとか右しか指定しないというならこちらがわかりやすいでしょう。
border-top :dotted 2px #009900;