border-width: ***; border-***-width: ***;
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;
}
【太さのサンプル】
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>