tableやdivやp要素においてborderを使うと味気ないものになりますよね。
そこでborderを装飾してみましょう!

色のつけ方
borderに色を付けるには 色を付けたい要素に対して
border-colorを使用します。
見やすいようにborderのスタイルをsolidにしています
例)
.box1{
border-color: #ff6699;
border-style: solid;
border-width: 5px
}

こんな感じ


borderの上下左右の色付けを細かく指示するには半角スペースで区切って色を記入します。
.box1{
border-color: 上下の色 左右の色;
border-style: solid;
border-width: 5px
}

上下と左右の色が違う


.box1{
border-color: 上の色 左右の色 下の色;
border-style: solid;
border-width: 5px
}

上と下と左右の色が違う


.box1{
border-color: 上の色 右の色 下の色 左の色;
border-style: solid;
border-width: 5px
}

枠線全部の色が違う


使い方によってはかわいい色合いにもできますね。
.box1{
border-color: #ff6699 #ff66ff #ff9999 #ff99cc;
border-style: solid;
border-width: 5px
}

かわいい?


枠線の種類
枠線には色々種類があります。 種類を指定するには指定したい要素に対して border-styleを使用します。
例)
.box1{
border-color: #ff6699;
border-style: 指定したいスタイル;
border-width: 5px
}

上の例)はsolidです。上のように指定していくと色々出来ますので下はsumpleです。
色はすべて#ff6699で指定しています。
solid


dotted


dashed


double


groove
線が凹んだ様に見えます。


ridge
線が膨らんだ様に見えます。


inset
線の内側が凹んだ様に見えます。


outset
線の外側が凹んだ様に見えます。


枠線を一括指定
枠線の色や装飾をいっぺんに指定できます。
border: 枠線の太さ 枠線の種類 枠線の色
間を半角スペースで区切って指定します。

例)
.box1{
border: 5px solid #ff6699
}