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

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

border-width と border-***-width は、境界線の太さを指定するプロパティです。

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

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


div.example1 {
border-width: medium thin;
border-color: #000000;
border-style: solid;
}

div.example2 {
border-top-width: 2px;
border-right-width: 4px;
border-bottom-width: 6px;
border-left-width: 8px;
border-color: #000000;
border-style: solid;
}

境界線の太さ

境界線の太さは、次の値で指定します。

  • 数値+単位（px 等） … 任意の太さ
  • thin … 細い線
  • medium … 中間の太さ （初期値）
  • thick … 太い線

太さのサンプル

thin （細い線）

medium （中間の太さ）

thick （太い線）

1px

2px

3px

5px

10px

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

プロパティ名 値 説明
border-width 境界線の太さ 上下左右の境界線の太さを指定

次のように、4タイプの指定方法があります。それぞれの値は、半角スペースで区切って記述します。

  • border-width: 2px; … ［上下左右］ を指定
  • border-width: 2px 4px; … ［上下］ と ［左右］ を指定
  • border-width: 2px 4px 6px; … ［上］ と ［左右］ と ［下］ を指定
  • border-width: 2px 4px 6px 8px; … ［上］ と ［右］ と ［下］ と ［左］ を指定

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

プロパティ名 値 説明
border-top-width 境界線の太さ 上の境界線の太さを指定
border-right-width 境界線の太さ 右の境界線の太さを指定
border-bottom-width 境界線の太さ 下の境界線の太さを指定
border-left-width 境界線の太さ 左の境界線の太さを指定

使用例


<!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, h2, span {
border-color: #2b2b2b;
border-style: solid;
}

h1 {
border-width: thin;
}

h2 {
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 3px;
border-left-width: 10px;
}

span {
border-width: 2px 0;
}

</style>

</head>
<body>

<h1>細い境界線</h1>

<h2>上右に0、下に3px、左に10pxの境界線</h2>

<p>上下に2pxの<span>境界線</span>を指定します。</p>

</body>
</html>
表示例

細い境界線

上右に0、下に3px、左に10pxの境界線

上下に2pxの境界線を指定します。