はい、境界線の幅は 5px、10px、20px、または任意の値に設定できます。
しかし、1px の境界線ごとに個別の色を設定できることを想像したことがありますか?このコンセプトは何ですか?つまり、要素に 10 ピクセルの境界線を設定すると、この 10 ピクセルの境界領域に 10 色を設定できます。それぞれの1pxがレイヤー（グループ）となります。デモ: css3 border-colors の複数セットの境界線の詳細な説明
それでは、要素の境界線のサイズを設定する方法を確認してみましょう (コード ブロック 1)。
上記のコードは、className テストを使用して div 要素に 6 ピクセルの境界線を定義したことを示しています。 もちろん、これは 4 つの辺を持つ長方形です。
したがって、この CSS コードは実際には次のように改良できます (コード ブロック 2)。
洗練されたコードを通じて、実際に長方形の 4 つの辺に色を設定できることがわかりました。色を同じに設定するか異なる色に設定するかは、ユーザーのニーズによって異なります。
洗練されたコードを実行すると (もちろん各辺の色を変更できます)、6 ピクセルの黒い境界線が付いた四角形が表示されます。まあ、これが私たちが期待していることです。
ただし、6 ピクセルの境界線を 6 つのグループに分割し、各 1 ピクセルが 1 つのグループとなるため、各境界線を最大 6 つの異なる色に設定できるようになりました。
やり方は？見てみましょう (コード ブロック 3):
。テスト{
ボーダー幅:6px;
境界線のスタイル:実線;
ボーダートップカラー:#000 #fff #999 #aaa #ccc #eee;
ボーダー右の色:#000 #fff #999 #aaa #ccc #eee;
ボーダーボトムカラー:#000 #fff #999 #aaa #ccc #eee;
ボーダー左カラー:#000 #fff #999 #aaa #ccc #eee;
}
。テスト{
ボーダー幅:6px;
境界線のスタイル:実線;
ボーダートップカラー:#000;
ボーダー右の色:#000;
ボーダーボトムカラー:#000;
ボーダー左の色:#000;
}
。テスト{
ボーダー:6px ソリッド #000;
}
<div class="test">境界線の色の設定をテストする</div>