境界線の太さ境界線の色 境界線のスタイル境界線の一括指定 ボックスcss ﾘﾌｧﾚﾝｽ へ
境界線の太さを指定する(CSS)
border-width: *px; border-top-width: *px;
　このプロパティは、全てのタグ（要素）に適用できます。
　border-width、border-top-width は、境界線の太さを指定するプロパティです。
border-width … 上下左右の境界線の太さをまとめて指定します。
border-top-width … 上下左右の境界線の太さを個別に指定します。
（top の部分には、right、bottom、left が入ります）
　このように、上下左右をまとめて指定する方法と、それぞれを個別に指定する方法があります。
　div { border-width: medium thin; border-color: #000000; border-style: solid; }
　div { border-top-width: 2px; border-right-widht: 4px; border-bottom-width: 2px;
border-left-width: 4px; border-color: #000000; border-style: solid; }
　【境界線の太さ】
数値＋単位（px 等） … 任意の太さ
thin … 細い線、medium … 中間の太さ（初期値）、thick … 太い線
　【太さのサンプル】
thin … 細い線
medium … 中間（初期値）
thick … 太い線
上下左右：1px
左と上：1px、右と下：2px
上：2px､右：3px､下：4px､左：5px
　■ border-width … 上下左右をまとめて指定
プロパティ名値説　　明
border-width ピクセル数 or
medium など		 上下左右の境界線の太さを指定
（初期値：thin）
　【指定方法】
　次の４タイプの指定方法があります。それぞれの値は、半角スペースで区切ります。
① border-width: 2px; … 「上下左右」をまとめて指定
② border-width: 2px 3px; … 「上下」と「左右」を指定
③ border-width: 2px 3px 4px; … 「上」､「左右」､「下」を指定
④ border-width: 2px 3px 4px 5px; … 「上」､「右」､「下」､「左」を指定（時計回り）
　■ border-***-width … 上下左右を個別に指定
プロパティ名値説　　明
border-top-width ピクセル数 or
medium など		 上の境界線の太さを指定
border-right-width 右の境界線の太さを指定
border-bottom-width 下の境界線の太さを指定
borderleft-width 左の境界線の太さを指定
境界線を表示させるには、同時に「境界線のスタイル」も指定します。
　★ 使用例とブラウザでの表示 (b3-1)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .b3-1div1 { border: solid blueviolet; border-width: thin; }
.b3-1div2 { border: solid steelblue; border-top-width: 0; border-right-width: 0;
border-bottom-width: 3px; border-left-width: 2px; }
.b3-1span1 { border: solid blue; border-width: 1px 1px; }
.b3-1span2 { border: solid red; border-width: 2px 2px; }
.b3-1spanAll { border: solid limegreen; border-width: 1px; line-height: 22pt; }
使　用　例   ブラウザの表示
<div class=b3-1div1>&nbsp;細い境界線：thin<br>
&nbsp;２行目にも境界線を表示します。</div>
 細い境界線： thin
 ２行目にも境界線を表示します。
<div class=b3-1div2>&nbsp;下:3px･左:2pxの境界線</div>
 下:3px･左:2pxの境界線
<span class=b3-1spanAll>1pxの<span class=b3-1span1>
青線</span> 、2pxの<span class=b3-1span2>赤線</span>
で囲い、全体を緑の線で囲いました。</span>		 1pxの 青線 、2pxの 赤線 で囲い、全体を緑の線で囲いました。
※ <div>タグ（ブロック要素）に境界線を指定した場合、終了タグ（</div>）を指定した行まで、横幅一杯に境界線を引きます。
※ <span>タグ（インライン要素）に境界線を指定した場合、文の途中から境界線を表示します。境界線の終わりは、終了タグ（</span>）タグまでです。
※ 例１と例２の&nbsp;は、境界線と文字の間に半角スペースを強制的に挿入する時の書き方です。通常は、文の書き始めの半角スペースは無視され、文章内に半角スペースを二個以上続けても一個分しか表示しません。
関連するページ
CSS スタイルシート輪郭線の太さ：アウトラインの太さを指定する
境界線の太さ境界線の色 境界線のスタイル境界線の一括指定 ボックスcss ﾘﾌｧﾚﾝｽ へ
境界線の色を指定する(CSS)
border-color: #00ffff; border-top-color: blue;
　このプロパティは、全てのタグ（要素）に適用できます。
　border-color は、境界線の色を指定するプロパティです。
border-color … 上下左右の境界線の色をまとめて指定します。
border-top-color … 上下左右の境界線の色を個別に指定します。
（top の部分には、right、bottom、left が入ります）
　このように、上下左右をまとめて指定する方法と、それぞれを個別に指定する方法があります。
　div { border-width: thick; border-color:00ffff; border-style: solid; }
　div { border-width: 1px; border-top-color: lightblue; border-right-color: blue;
border-bottom-color: blue; border-left-color: lightblue; border-style: solid; }
　■ border-color … 上下左右をまとめて指定
プロパティ名値説　　明
border-color カラーコード or
カラーネーム		 上下左右の境界線の色を指定
＊ colorプロパティの値が初期値となります。
　【指定方法】
　次の４タイプの指定方法があります。それぞれの値は、半角スペースで区切ります。
① border-color: #85b9e9; … 「上下左右」をまとめて指定
② border-color: #85b9e9 #bde9ba; … 「上下」と「左右」を指定
③ border-color: #85b9e9 #bde9ba #ffd37d; … 「上」､「左右」､「下」を指定
④ border-color: #85b9e9 #bde9ba #85b9e9 #bde9ba; … 「上」､「右」､「下」､「左」を指定（時計回り）
　■ border-***-color … 上下左右を個別に指定
プロパティ名値説　　明
border-top-color カラーコード or
カラーネーム		 上の境界線の色を指定
border-right-color 右の境界線の色を指定
border-bottom-color 下の境界線の色を指定
borderleft-color 左の境界線の色を指定
＊ colorプロパティの値が初期値となります。
　各プロパティの値には、transparent（透明）を指定することもできます。（ただし、Internet Exp.6 以前ではこの値に対応していないようです）
　色指定の詳細は、「カラーネーム」のページをご覧下さい。カラーネームのページへ
境界線を表示させるには、同時に「境界線のスタイル」も指定します。
　★ 使用例とブラウザでの表示 (b3-2)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .b3-2 h2, .b3-2 h3, .b3-2 p { border: solid; border-width: 2px 4px 4px 2px;
padding: 5px; margin: 0px 0px 4px; }
.b3-2 h2 { border-color: blue; }
.b3-2 h3 { border-top-color: lightgreen; border-right-color: darkgreen;
border-bottom-color: darkblue; border-left-color: lightblue; }
.b3-2 p { border-color: mediumpurple transparent; }
使　用　例   ブラウザの表示
<DIV class=b3-2>

<h2>青い境界線</h2>

<h3>上･下･左･右に異なる色を指定</h3>

<p>左･右の境界線を透明にします。</p>

</DIV>

青い境界線

上･下･左･右に異なる色を指定

左･右の境界線を透明にします。

※ .b3-2 h2, .b3-2 h3, .b3-2 p：これは、ピリオド型のシート名とタグ名とを組み合わせた例です。幾つかのタグに同じスタイルシートを纏めて設定する場合は、タグ名をカンマ（,）で区切って指定します。
※ padding: 5px; は、文字と境界線との余白を５ピクセルに設定します。
※ margin: 0px～4px; は、境界線の外側の余白（上･左･右）を０ピクセルに設定します。通常、<h1>～<h6>タグや<p>タグは上下に余白がつきますが、この余白を「なくす」働きをしています。
※ .b3-2 p { ....transparent; } は、左右の境界線を透明化する指定です。
関連するページ
CSS スタイルシート輪郭線の色：アウトラインの色を指定する
Utilety Page (参考)カラーコード：「カラーネーム と カラーコード」へ
境界線の太さ境界線の色 境界線のスタイル境界線の一括指定 ボックスcss ﾘﾌｧﾚﾝｽ へ
境界線のスタイルを指定する(CSS)
border-style: solid; border-top-style: dashed;
　このプロパティは、全てのタグ（要素）に適用できます。
　border-style は、境界線のスタイルを指定するプロパティです。
border-style … 上下左右の境界線のスタイルをまとめて指定します。
border-top-style … 上下左右の境界線のスタイルを個別に指定します。
（top の部分には、right、bottom、left が入ります）
　このように、上下左右をまとめて指定する方法と、それぞれを個別に指定する方法があります。
　div { border-style: solid; padding: 1px 4px; }
プロパティ名値境界線のスタイル
border-style

※記述例の solid を double ～ dashed に変えると「境界線のスタイル」欄に示した境界線を表示します。

※「二重線」と「点線」は、線の太さに注意して下さい。
 none線なし／（初期値）
solid
実 線
double
二重線(線の太さ：3px以上)
groove
谷型の線
ridge
山型の線
inset
凹型の線
outset
凸型の線
dotted
点 線(線の太さ：3px以上)
dashed
破 線
　■ border-style … 上下左右をまとめて指定
プロパティ名値説　　明
border-style 境界線のスタイル 上下左右の境界線のスタイルを指定
　【指定方法】
　次の４タイプの指定方法があります。それぞれの値は、半角スペースで区切ります。
① border-style: solid; … 「上下左右」をまとめて指定
② border-style: solid double; … 「上下」と「左右」を指定
③ border-style: solid double dashed; … 「上」､「左右」､「下」を指定
④ border-style: solid double double solid; … 「上」､「右」､「下」､「左」を指定（時計回り）
　■ border-***-style … 上下左右を個別に指定
プロパティ名値説　　明
border-top-style 境界線のスタイル 上の境界線のスタイルを指定
border-right-style 右の境界線のスタイルを指定
border-bottom-style 下の境界線のスタイルを指定
borderleft-style 左の境界線のスタイルを指定
初期値が none（線なし）であることに注意して下さい。
　★ 使用例とブラウザでの表示 (b3-3)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .b3-3 h2, .b3-3 h3, .b3-3 p { border-width: 3px 5px 5px 3px;
border-color: blue; padding: 2px 5px; margin: 0px 0px 4px; }
.b3-3 h2 { border-style: solid; }
.b3-3 h3 { border-top-style: double; border-right-style: ridge;
border-bottom-style: ridge; border-left-style: double; }
.b3-3 p { border-style: dashed dotted; }
使　用　例   ブラウザの表示
<DIV class=b3-3>

<h2>境界線は点線</h2>

<h3>上･左：二重線、右･下：山型</h3>

<p>上下：破線、左右：実線</p>

</DIV>

境界線は点線

上･左：二重線、右･下：山型

上下：破線、左右：実線

※ .b3-3 h2, .b3-3 h3, .b3-3 p：これは、ピリオド型のシート名とタグ名とを組み合わせた例です。幾つかのタグに同じスタイルシートを纏めて設定する場合は、タグ名をカンマ（,）で区切って指定します。
※ 二重線（double）と点線（dotted）の太さは、３ピクセル以上を指定して下さい。
※ padding: 2px 5px; は、文字と境界線との余白を上下２ピクセル、左右５ピクセルに設定します。
※ margin: 0px～4px; は、境界線の外側の余白（上･左･右）を０ピクセルに設定します。通常、<h1>～<h6>タグや<p>タグは上下に余白がつきますが、この余白を「なくす」働きをしています。
関連するページ
CSS スタイルシート輪郭線の色：アウトラインのスタイルを指定する
境界線の太さ境界線の色 境界線のスタイル境界線の一括指定 ボックスcss ﾘﾌｧﾚﾝｽ へ
境界線の太さ・色・スタイルをまとめて指定する(CSS)
border: 1px blue solid; border-top: thick #0000ff dotted;
　このプロパティは、全てのタグ（要素）に適用できます。
　border と border-*** は、境界線の太さ、色、スタイルをまとめて指定するプロパティです。
border … 上下左右の境界線をまとめて指定します。
border-top … 上下左右の境界線を個別に指定します。
（top の部分には、right、bottom、left が入ります）
　このように、上下左右をまとめて指定する方法と、それぞれを個別に指定する方法があります。
　■ border … 上下左右をまとめて指定
　div { border: thick #0000ff solid; }
プロパティ名値　および　説　明
border:thick…線の太さ #0000ff…線の色 solid…線のスタイル ;
初期値medium文字色の値 none 
＊ それぞれの値は、半角スペースで区切って記述します。
記述する順序は自由で、必要のない指定は省略できます。（省略した場合は初期値になります）
※ 境界線スタイルの指定を省略すると、境界線が表示されなくなります。境界線を表示する場合は、この指定を省略しないで下さい。
　■border-*** … 上下左右を個別に指定
　div { border-top: 2px blue solid; border-right: 3px blue double;
border-bottom: 3px blue double; border-left: 2px blue solid; }
プロパティ名値説　明
border-top 上の記述例
を参照		 上の境界線（太さ、色、スタイル）を指定
border-right 右の境界線（太さ、色、スタイル）を指定
border-bottom 下の境界線（太さ、色、スタイル）を指定
border-left 左の境界線（太さ、色、スタイル）を指定
＊ 値の指定方法は border と同じです。
　★ 使用例とブラウザでの表示 (b3-4)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .b3-4 h3, .b3-4 h4, .b3-4 span { padding: 2px 10px; margin: 0px 0px 4px; }
.b3-4 h3 { border: medium lightgreen dotted; }
.b3-4 h4 { border-top: medium plum dotted; border-right: thick blue double;
border-bottom: medium green dashed; border-left: thick gray groove; }
.b3-4 span { border-top: 4px purple dotted; border-bottom: 4px purple dotted; }
使　用　例   ブラウザの表示
<div class=b3-4>
<h3>薄緑色：点線</h3>
<h4>上下左右で異なる境界線</h4>
上下の<span>境界線</span>のみ表示
</div>

薄緑色：点線

上下左右で異なる境界線


上下の境界線のみ表示

※ { padding: 2px 10px; margin: 0px 0px 4px; } は余白の設定で、<h3><h4><span>に共通した部分を纏めて指定しています。
関連するページ
CSS スタイルシート輪郭線(纏)：アウトラインをまとめて指定する
境界線の太さ境界線の色 境界線のスタイル境界線の一括指定 ボックスcss ﾘﾌｧﾚﾝｽ へ