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
}