border: ***; border-***: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

border と border-*** は、境界線の太さ、色、スタイルを一括で指定するプロパティです。

  • border … 上下左右の境界線を一括で指定
  • border-*** … 上下左右の境界線を個別に指定 （*** の部分には、top、right、bottom、left が入ります）

上記のように、上下左右をまとめて指定する方法と、それぞれを個別に指定する方法があります。


div.example1 {
border: thick #ff0000 solid;
}

div.example2 {
border-top: 2px #85b9e9 solid;
border-right: 4px #bde9ba double;
border-bottom: 6px #ffd37d dotted;
border-left: 8px #d1d1d1 dashed;
}

border … 上下左右を一括で指定

プロパティ名 値 説明
border 以下を参照 境界線（太さ、色、スタイル）を指定 
border: thick #ff0000 solid;

それぞれの値は、半角スペースで区切って記述します。

記述する順序は自由で、必要のない指定は省略することもできます。（省略した場合は初期値が適用されます）

  • 境界線スタイルの指定を省略すると、境界線が表示されなくなってしまいます（初期値が none なので）。境界線を表示する場合は、この指定を省略しないようにしてください。

border-*** … 上下左右を個別に指定

プロパティ名 値 説明
border-top 以下を参照 上の境界線（太さ、色、スタイル）を指定
border-right 以下を参照 右の境界線（太さ、色、スタイル）を指定
border-bottom 以下を参照 下の境界線（太さ、色、スタイル）を指定
border-left 以下を参照 左の境界線（太さ、色、スタイル）を指定 
border-top: 2px #85b9e9 solid;
border-right: 4px #bde9ba double;
border-bottom: 6px #ffd37d dotted;
border-left: 8px #d1d1d1 dashed;

値の指定方法は border と同じです。

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

h1 {
border: medium #ff0000 dotted;
}

h2 {
border-top: medium red dotted;
border-right: thick blue double;
border-bottom: medium green dashed;
border-left: thick gray groove;
}

span {
border-top: 2px #ff0000 dotted;
border-bottom: 2px #ff0000 dotted;
}

</style>

</head>
<body>

<h1>赤い点線の境界線</h1>

<h2>上下左右に異なる境界線を指定</h2>

<p>上下の<span>境界線</span>のみ表示します。</p>

</body>
</html>
表示例

赤い点線の境界線

上下左右に異なる境界線を指定

上下の境界線のみ表示します。