border-top, border-right, border-bottom, border-leftプロパティは、各辺のボーダーの幅（border-width）、種類（border-style）、色（border-color）を一括で指定できるショートハンドです。

各値は、任意の順番で半角スペースなどの空白類文字で区切って書き、指定をしなかった値に関しては初期値にリセットされます。尚、種類（border-style）は省略してしまうと、初期値がnoneになっているため、ボーダーが表示されないので注意が必要です。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

[<border-width>||<border-style>||<border-top-color>]｜inherit

初期値

個別のプロパティを参照します

適用される要素

全ての要素

継承

しません

パーセント値

N/A

メディア

visual

border個別指定のサンプル

p {
  margin: 10px;
  padding: 8px 10px;
  background: #f3f2eb;
}

p.sample {
  border-top: 10px solid #f99;
  border-right: 5px double #9f9;
  border-bottom: 10px solid #99f;
  border-left: 5px double #333;
}

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

サンプルです。
4辺でそれぞれ違うスタイルが適用されているのが確認できます。