ボーダーに関するプロパティを説明します。
★マージン(margin)・パディング(padding)・ボーダー(border)とは？
マージン(margin)とは、要素周りの余白部分で、パディング(padding)とは
要素（文字や画像）からボーダー(border)までの領域部分です。
ボーダー(border)は要素を囲む箱のようなものです。
マージン関連のプロパティ
パディング関連のプロパティ
★ボーダーの色・スタイル・太さを指定する
書式 border:ボーダーの各種設定
ボーダーの上下左右全てに色・スタイル・太さの指定をまとめて行います。
複数の指定をする場合、半角スペースで区切ります。
■色の値
色の名前・カラーコード：色名やカラーコード(#FFFF00等)で指定します。
transparent：ボーダーの色を透明にします。
■太さの値
数値：px・pt・ex・emなどの単位で指定します(例 1px 1em)
キーワード(thin/medium/thick)：thin（細い）、medium（通常）、thick（太い）の
キーワードで太さを指定します。
ブラウザによって太さが異なる場合があります。
■スタイルの値
none：太さが0になり、ボーダーが表示されなくなります。
ボーダーに何も指定していない状態と同じであり、初期値です。
hidden：太さが0になり、ボーダーが表示されなくなります。
solid：１本線で表示。
double：２本線で表示。
ridge：立体的に出っ張った線で表示。
groove：立体的にへこんだ線で表示。
outset：ボーダーに囲まれた部分全てが立体的に出っ張った表示になります。
(上・右が暗く下・左が明るくなる)
inset：ボーダーに囲まれた部分全てが立体的にへこんだ表示になります。
(上・右が明るく、下・左が暗くなる)
dashed：破線で表示。
dotted：点線で表示。
記述例・サンプル
ボーダー色 ボーダーの太さ ボーダーのスタイル種類 一括指定
記述例１（ボーダーの色を変える）
--- CSSの記述 ---
/* ボーダーの色を変える(線表示のためにsolidを指定してます) */
H3.bdcolor1{
border:#ff0000 solid;
}
P.bdcolor2{
border:blue solid;
}
--- HTMLの記述 ---
<H3 class="bdcolor1">ボーダーを赤にします。</H3>
<P class="bdcolor2">ボーダーを青にします。あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも</P>
ブラウザで表示（ボーダーの色を変える）
ボーダーを赤にします。
ボーダーを青にします。あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
記述例２（ボーダーの太さを変える）
--- CSSの記述 ---
/* ボーダーの太さを変える(値) */
H2#bdwid1{
border:1px solid;
}
/* ボーダーの太さを変える(キーワード) */
P.bdwid2{
border:thin solid;
}
P.bdwid3{
border:medium solid;
}
P#bdwid4{
border:thick solid;
}
--- HTMLの記述 ---
<H2 ID="bdwid1">1pxのボーダー。</H2>
<P class="bdwid2">thinのボーダー。</P>
<P class="bdwid3">mediumのボーダー。</P>
<P ID="bdwid4">thickのボーダー。</P>
ブラウザで表示（ボーダーの太さを変える）
1pxのボーダー。
thinのボーダー。
mediumのボーダー。
thickのボーダー。
記述例（ボーダーの種類を変える）
--- CSSの記述 ---
/* １本線 */
P.bdstyle1{
border:solid 1px;
}
/* ２本線 */
P.bdstyle2{
border:double 6px;
}
/* 立体的に出っ張った線 */
P.bdstyle3{
border:ridge 10px;
}
/* 立体的にへこんだ線 */
P.bdstyle4{
border:groove 10px;
}
/* ボーダーで囲んだ部分が出っ張る */
.bdstyle5{
border:outset 7px;
}
/* ボーダーで囲んだ部分がへこむ */
.bdstyle6{
border:inset 7px;
}
/* 破線 */
.bdstyle7{
border:dashed 2px;
}
/* 点線 */
.bdstyle8{
border:dotted 2px;
}
/* none */
#bdstyle9{
border:none 2px;
}
/* hidden */
#bdstyle0{
border:none 2px;
}
--- HTMLの記述 ---
<P class="bdstyle1">１本線</P>
<P class="bdstyle2">２本線</P>
<P class="bdstyle3">立体的にでっぱった線</P>
<P class="bdstyle4">立体的にへこんだ線</P>
<H4 class="bdstyle5">囲んだ部分が出っ張る</H4>
<H3 class="bdstyle6">囲んだ部分がへこむ</H3>
<H2 class="bdstyle7">破線</H2>
<H2 class="bdstyle8">点線</H2>
<H5 ID="bdstyle9">none</H5>
<H5 ID="bdstyle0">hidden</H5>
ブラウザで表示（ボーダーの種類を変える）
１本線
２本線
立体的にでっぱった線
立体的にへこんだ線
囲んだ部分が出っ張る
囲んだ部分がへこむ
破線
点線
none
hidden
記述例（一括指定）
--- CSSの記述 ---
/* 青色・点線・太さ5px */
.border_blue_w5_dot{
border:#0000ff dotted 5px;
}
--- HTMLの記述 ---
<H3 class="border_blue_w5_dot">青色・点線・太さ5px</H3>
ブラウザで表示（一括指定）
青色・点線・太さ5px
★ボーダーの色を指定する
書式 border-color:カラーコードや色名
ボーダーの色を指定します。
上下左右の色は別々に指定することが可能です。
複数指定する場合、半角スペースで区切ります。
１つの値：上下左右の色が変わります。
２つの値：記述した順に上下・左右の色が変わります。
３つの値：記述した順に上・左右・下の色が変わります。
４つの値：記述した順に上・右・下・左の色が変わります。
記述例
--- CSSの記述 ---
/* １つの値 青*/
.bd_color1{
border-color:#0000ff;
border-style:solid;
}
/* ２つの値 上下青 左右赤*/
.bd_color2{
border-color:#0000ff #ff0000;
border-style:solid;
}
/* ３つの値 上青 左右赤 下緑*/
.bd_color3{
border-color:#0000ff #ff0000 #008000;
border-style:solid;
}
/* ４つの値 上青 右赤 下緑 左黄*/
.bd_color4{
border-color:#0000ff #ff0000 #008000 #ffff00;
border-style:solid;
}
--- HTMLの記述 ---
<P class="bd_color1">青一色</P>
<P class="bd_color2">上下青 左右赤</P>
<P class="bd_color3">上青 左右赤 下緑</P>
<P class="bd_color4">上青 右赤 下緑 左黄</P>
ブラウザで表示
青一色
上下青 左右赤
上青 左右赤 下緑
上青 右赤 下緑 左黄
★ボーダーの太さを指定する
書式 border-width:単位やキーワード
ボーダーの太さを指定します。
指定方法に単位とキーワードがあります。
上下左右別々に太さを設定できます。
■太さの値
数値：px・pt・ex・emなどの単位で指定します(例 1px 1em)
キーワード(thin/medium/thick)：thin（細い）、medium（通常）、thick（太い）の
キーワードで太さを指定します。
ブラウザによって太さが異なる場合があります。
記述例
/* 3px */
.bd_width1{
border-style:solid;
border-width:3px;
}
/* 1em */
.bd_width2{
border-style:solid;
border-width:1em;
}
/* thin（細い） */
.bd_width3{
border-style:solid;
border-width:thin;
}
/* medium（普通） */
.bd_width4{
border-style:solid;
border-width:medium;
}
/* thick（太い） */
.bd_width5{
border-style:solid;
border-width:thin;
}
/* ２つの値 上下 4px 左右 12px */
.bd_width6{
border-style:solid;
border-width:4px 12px;
}
/* ３つの値 上15px 左右1px 下7px */
.bd_width7{
border-style:solid;
border-width:15px 1px 7px;
}
/* ４つの値 上30px 右5px 下14px 左20px*/
.bd_width8{
border-style:solid;
border-width:30px 5px 14px 20px;
}
--- HTMLの記述 ---
<P class="bd_width1">3px</P>
<P class="bd_width2">1em</P>
<P class="bd_width3">thin（細い）</P>
<P class="bd_width4">medium（普通）</P>
<P class="bd_width5">thick（太い）</P>
<P class="bd_width6">２つの値 上下 4px 左右 12px</P>
<P class="bd_width7">３つの値 上15px 左右1px 下7px</P>
<P class="bd_width8">４つの値 上30px 右5px 下14px 左20px</P>
ブラウザで表示
3px
1em
thin（細い）
medium（普通）
thick（太い）
２つの値 上下 4px 左右 12px
３つの値 上15px 左右1px 下7px
４つの値 上30px 右5px 下14px 左20px
★ボーダースタイルを指定する
書式 border-style:ボーダーの種類
ボーダーのスタイルを指定します。
上下左右のボーダーに別々の指定をすることができます。
複数指定する場合、半角スペースで区切ります。
１つの値：上下左右のスタイルが変わります。
２つの値：記述した順に上下・左右のスタイルが変わります。
３つの値：記述した順に上・左右・下のスタイルが変わります。
４つの値：記述した順に上・右・下・左のスタイルが変わります。
■スタイルの値
none：太さが0になり、ボーダーが表示されなくなります。
ボーダーに何も指定していない状態と同じであり、初期値です。
hidden：太さが0になり、ボーダーが表示されなくなります。
solid：１本線で表示。
double：２本線で表示。
ridge：立体的に出っ張った線で表示。
groove：立体的にへこんだ線で表示。
outset：ボーダーに囲まれた部分全てが立体的に出っ張った表示になります。
(上・右が暗く下・左が明るくなる)
inset：ボーダーに囲まれた部分全てが立体的にへこんだ表示になります。
(上・右が明るく、下・左が暗くなる)
dashed：破線で表示。
dotted：点線で表示。
記述例
--- CSSの記述 ---
/* 値１つ（全て２本線） */
.bd_style1{
border-style:double;
}
/* 値２つ（上下２本線 左右１本線） */
.bd_style2{
border-style:double solid;
}
/* 値３つ（上２本線 左右１本線 下破線） */
.bd_style3{
border-style:double solid dashed;
}
/* 値４つ（上出っ張った線 右１本線 下へこんだ線 左２本線） */
.bd_style4{
border-style:ridge solid groove double;
}
--- HTMLの記述 ---
<P class="bd_style1">２本線</P>
<P class="bd_style2">上下２本線 左右１本線</P>
<P class="bd_style3">上２本線 左右１本線 下破線</P>
<P class="bd_style4">上出っ張った線 右１本線 下へこんだ線 左２本線</P>
ブラウザで表示
２本線
上下２本線 左右１本線
上２本線 左右１本線 下破線
上出っ張った線 右１本線 下へこんだ線 左２本線
★上ボーダーの色・スタイル・太さを指定する
書式 border-top:色・太さ・スタイルの値
上ボーダーの色、太さ、スタイルを指定します。
複数指定する時は半角スペースで区切ります。
■色の値
色の名前・カラーコード：色名やカラーコード(#FFFF00等)で指定します。
transparent：ボーダーの色を透明にします。
■太さの値
数値：px・pt・ex・emなどの単位で指定します(例 1px 1em)
キーワード(thin/medium/thick)：thin（細い）、medium（通常）、thick（太い）の
キーワードで太さを指定します。
ブラウザによって太さが異なる場合があります。
■スタイルの値
none：太さが0になり、ボーダーが表示されなくなります。
ボーダーに何も指定していない状態と同じであり、初期値です。
hidden：太さが0になり、ボーダーが表示されなくなります。
solid：１本線で表示。
double：２本線で表示。
ridge：立体的に出っ張った線で表示。
groove：立体的にへこんだ線で表示。
outset：ボーダーに囲まれた部分全てが立体的に出っ張った表示になります。
(上・右が暗く下・左が明るくなる)
inset：ボーダーに囲まれた部分全てが立体的にへこんだ表示になります。
(上・右が明るく、下・左が暗くなる)
dashed：破線で表示。
dotted：点線で表示。
記述例
/* 赤色・6px・２本線 */
P.bordertop_red_6_double{
border-top:#ff0000 6px double;
}
/* 青色・3px・点線 */
P.bordertop_blue_3_dotted{
border-top:#0000ff 3px dotted;
padding:20px;
}
--- HTMLの記述 ---
<P class="bordertop_red_6_double">赤色・6px・２本線</P>
<P class="bordertop_blue_3_dotted">青色・3px・点線</P>
ブラウザで表示
★上ボーダーの色を指定する
書式 border-top-color:色名、カラーコード
上ボーダーの色を指定します。
上ボーダー以外の色は変わらないので、同じ色、または別々に色を変える場合は
「border-color」を使用してください。
記述例
--- CSSの記述 ---
/* 青 */
H3.bd_topcolor1{
border-style:solid;
border-top-color:#0000ff;
}
/* 緑 */
H3.bd_topcolor2{
border-style:solid;
border-top-color:#00ff00;
}
--- HTMLの記述 ---
<H3 class="bd_topcolor1">あいうえお</H3>
<H3 class="bd_topcolor2">アイウエオ</H3>
ブラウザで表示
あいうえお
アイウエオ
★上ボーダーの太さを指定する
書式 border-top-width:上ボーダーの太さ
上ボーダーの太さを指定します。
上ボーダー以外の太さは変わらないので、同じ太さ、または別々に太さを変える場合は
「border-width」を使用してください。
■太さの値
数値：px・pt・ex・emなどの単位で指定します(例 1px 1em)
キーワード(thin/medium/thick)：thin（細い）、medium（通常）、thick（太い）の
キーワードで太さを指定します。
ブラウザによって太さが異なる場合があります。
記述例
--- CSSの記述 ---
/* 1em */
.bd_top_width11{
border-style:solid;
border-top-width:1em;
}
/* 3px */
.bd_top_width12{
border-style:solid;
border-top-width:3px;
}
--- HTMLの記述 ---
<P class="bd_top_width1">1emの上ボーダー</P>
<P class="bd_top_width2">3pxの上ボーダー</P>
ブラウザで表示
★上ボーダーのスタイルを指定する
書式 border-top-style:上ボーダーのスタイル
上ボーダーのスタイルを指定します。
プロパティのボーダー指定がborder-top-styleだけの場合
ボーダーの上部分だけが表示されます。
ボーダーを同じスタイル、または別々にスタイルを変える場合は
「border-style」を使用してください。
■スタイルの値
none：太さが0になり、ボーダーが表示されなくなります。
ボーダーに何も指定していない状態と同じであり、初期値です。
hidden：太さが0になり、ボーダーが表示されなくなります。
solid：１本線で表示。
double：２本線で表示。
ridge：立体的に出っ張った線で表示。
groove：立体的にへこんだ線で表示。
outset：ボーダーに囲まれた部分全てが立体的に出っ張った表示になります。
(上・右が暗く下・左が明るくなる)
inset：ボーダーに囲まれた部分全てが立体的にへこんだ表示になります。
(上・右が明るく、下・左が暗くなる)
dashed：破線で表示。
dotted：点線で表示。
記述例
--- CSSの記述 ---
/* 立体的に出っ張った線 */
.bd_top_style1{
border-top-style:ridge;
}
/* 破線 */
.bd_top_style2{
border-top-style:dashed;
}
/* ボーダーで見出しを作成 */
.midasi001{
border-top-style:solid;
border-left-style:solid;
border-left-width:20px;
}
--- HTMLの記述 ---
<P class="bd_top_style1">立体的な線</P>
<P class="bd_top_style2">破線</P>
<H3 class="midasi001">見出し</H3>
ブラウザで表示
★右ボーダーの色・スタイル・太さを指定する
書式 border-right:色・太さ・スタイルの値
右ボーダーの色、太さ、スタイルを指定します。
複数指定する時は半角スペースで区切ります。
■色の値
色の名前・カラーコード：色名やカラーコード(#FFFF00等)で指定します。
transparent：ボーダーの色を透明にします。
■太さの値
数値：px・pt・ex・emなどの単位で指定します(例 1px 1em)
キーワード(thin/medium/thick)：thin（細い）、medium（通常）、thick（太い）の
キーワードで太さを指定します。
ブラウザによって太さが異なる場合があります。
■スタイルの値
none：太さが0になり、ボーダーが表示されなくなります。
ボーダーに何も指定していない状態と同じであり、初期値です。
hidden：太さが0になり、ボーダーが表示されなくなります。
solid：１本線で表示。
double：２本線で表示。
ridge：立体的に出っ張った線で表示。
groove：立体的にへこんだ線で表示。
outset：ボーダーに囲まれた部分全てが立体的に出っ張った表示になります。
(上・右が暗く下・左が明るくなる)
inset：ボーダーに囲まれた部分全てが立体的にへこんだ表示になります。
(上・右が明るく、下・左が暗くなる)
dashed：破線で表示。
dotted：点線で表示。
記述例
/* 赤色・6px・２本線 */
H1.borderright_red_6_double{
border-right:#ff0000 6px double;
}
/* 青色・3px・点線 */
H1.borderright_blue_3_dotted{
border-right:#0000ff 3px dotted;
padding:20px;
}
--- HTMLの記述 ---
<H1 class="borderright_red_6_double">赤色・6px・２本線</H1>
<H1 class="borderright_blue_3_dotted">青色・3px・点線</H1>
ブラウザで表示
赤色・6px・２本線
青色・3px・点線
★右ボーダーの色を指定する
書式 border-right-color:色名、カラーコード
右ボーダーの色を指定します。
右ボーダー以外の色は変わらないので、同じ色、または別々に色を変える場合は
「
border-color」を使用してください。
（右ボーダーのみ表示＋色指定する場合は「
border-right」を使用します）
また「border-style」等でボーダーのスタイル指定しないとボーダーが表示されません。
記述例
--- CSSの記述 ---
/* 赤 */
.bd_rightcolor1{
border-style:solid;
border-right-color:#ff0000;
}
/* 緑 */
.bd_rightcolor2{
border-style:solid;
border-right-color:#00ff00;
}
--- HTMLの記述 ---
<H1 class="bd_rightcolor1">あいうえお</H1>
<H1 class="bd_rightcolor2">アイウエオ</H1>
ブラウザで表示
あいうえお
アイウエオ
★右ボーダーの太さを指定する
書式 border-right-width:右ボーダーの太さ
右ボーダーの太さを指定します。
右ボーダー以外の太さは変わらないので、同じ太さ、または別々に太さを変える場合は
「border-width」を使用してください。
（右ボーダーのみ表示＋スタイル指定する場合は「
border-right」を使用します）
また「border-style」等でボーダーのスタイル指定しないとボーダーが表示されません。
■太さの値
数値：px・pt・ex・emなどの単位で指定します(例 1px 1em)
キーワード(thin/medium/thick)：thin（細い）、medium（通常）、thick（太い）の
キーワードで太さを指定します。
ブラウザによって太さが異なる場合があります。
記述例
--- CSSの記述 ---
/* 2em */
.bd_right_width1{
border-style:solid;
border-right-width:2em;
}
/* 8px */
.bd_right_width2{
border-style:solid;
border-right-width:8px;
}
--- HTMLの記述 ---
<P class="bd_right_width1">2emの右ボーダー</P>
<P class="bd_right_width2">8pxの右ボーダー</P>
ブラウザで表示
★右ボーダーのスタイルを指定する
書式 border-right-style:右ボーダーのスタイル
右ボーダーのスタイルを指定します。
プロパティのボーダー指定がborder-right-styleだけの場合
ボーダーの右部分だけが表示されます。
ボーダーを同じスタイル、または別々にスタイルを変える場合は
「
border-style」を使用してください。
■スタイルの値
none：太さが0になり、ボーダーが表示されなくなります。
ボーダーに何も指定していない状態と同じであり、初期値です。
hidden：太さが0になり、ボーダーが表示されなくなります。
solid：１本線で表示。
double：２本線で表示。
ridge：立体的に出っ張った線で表示。
groove：立体的にへこんだ線で表示。
outset：ボーダーに囲まれた部分全てが立体的に出っ張った表示になります。
(上・右が暗く下・左が明るくなる)
inset：ボーダーに囲まれた部分全てが立体的にへこんだ表示になります。
(上・右が明るく、下・左が暗くなる)
dashed：破線で表示。
dotted：点線で表示。
記述例
--- CSSの記述 ---
/* ２本線 */
.bd_right_style1{
border-right-style:double;
}
/* 点線 */
.bd_right_style2{
border-right-style:dotted;
}
--- HTMLの記述 ---
<P class="bd_right_style1">２本線</P>
<H1 class="bd_right_style2">点線</H1>
ブラウザで表示
★下ボーダーの色・スタイル・太さを指定する
書式 border-bottom:色・太さ・スタイルの値
下ボーダーの色、太さ、スタイルを指定します。
複数指定する時は半角スペースで区切ります。
■色の値
色の名前・カラーコード：色名やカラーコード(#FFFF00等)で指定します。
transparent：ボーダーの色を透明にします。
■太さの値
数値：px・pt・ex・emなどの単位で指定します(例 1px 1em)
キーワード(thin/medium/thick)：thin（細い）、medium（通常）、thick（太い）の
キーワードで太さを指定します。
ブラウザによって太さが異なる場合があります。
■スタイルの値
none：太さが0になり、ボーダーが表示されなくなります。
ボーダーに何も指定していない状態と同じであり、初期値です。
hidden：太さが0になり、ボーダーが表示されなくなります。
solid：１本線で表示。
double：２本線で表示。
ridge：立体的に出っ張った線で表示。
groove：立体的にへこんだ線で表示。
outset：ボーダーに囲まれた部分全てが立体的に出っ張った表示になります。
(上・右が暗く下・左が明るくなる)
inset：ボーダーに囲まれた部分全てが立体的にへこんだ表示になります。
(上・右が明るく、下・左が暗くなる)
dashed：破線で表示。
dotted：点線で表示。
記述例
/* 赤色・6px・２本線 */
H1.borderbottom_red_6_double{
border-bottom:#ff0000 6px double;
}
/* 青色・3px・点線 */
H1.borderbottom_blue_3_dotted{
border-bottom:#0000ff 3px dotted;
padding:20px;
}
--- HTMLの記述 ---
<H1 class="borderbottom_red_6_double">赤色・6px・２本線</H1>
<H1 class="borderbottom_blue_3_dotted">青色・3px・点線</H1>
ブラウザで表示
赤色・6px・２本線
青色・3px・点線
★下ボーダーの色を指定する
書式 border-bottom-color:下ボーダーの色
下ボーダーの色を指定します。
下ボーダー以外の色は変わらないので、同じ色、または別々に色を変える場合は
「
border-color」を使用してください。
（下ボーダーのみ表示＋色指定する場合は「
border-bottom」を使用します）
また「border-style」等でボーダーのスタイル指定しないとボーダーが表示されません。
記述例
--- CSSの記述 ---
/* 紫 */
.bd_bottomcolor1{
border-style:solid;
border-bottom-color:#800080;
}
/* 青 */
.bd_bottomcolor2{
border-style:solid;
border-bottom-color:#0000ff;
}
--- HTMLの記述 ---
<H1 class="bd_bottomcolor1">あいうえお</H1>
<H1 class="bd_bottomcolor2">アイウエオ</H1>
ブラウザで表示
あいうえお
アイウエオ
★下ボーダーの太さを指定する
書式 border-bottom-width:下ボーダーの太さ
下ボーダーの太さを指定します。
下ボーダー以外の太さは変わらないので、同じ太さ、または別々に太さを変える場合は
「border-width」を使用してください。
（下ボーダーのみ表示＋スタイル指定する場合は「
border-bottom」を使用します）
また「border-style」等でボーダーのスタイル指定しないとボーダーが表示されません。
■太さの値
数値：px・pt・ex・emなどの単位で指定します(例 1px 1em)
キーワード(thin/medium/thick)：thin（細い）、medium（通常）、thick（太い）の
キーワードで太さを指定します。
ブラウザによって太さが異なる場合があります。
記述例
--- CSSの記述 ---
/* 1.5em */
.bd_bottom_width1{
border-style:solid;
border-bottom-width:1.5em;
}
/* 2px */
.bd_bottom_width2{
border-style:solid;
border-bottom-width:2px;
}
--- HTMLの記述 ---
<P class="bd_bottom_width1">1.5emの下ボーダー</P>
<P class="bd_bottom_width2">2pxの下ボーダー</P>
ブラウザで表示
★下ボーダーのスタイルを指定する
書式 border-bottom-style:下ボーダーのスタイル
下ボーダーのスタイルを指定します。
プロパティのボーダー指定がborder-bottom-styleだけの場合
ボーダーの下部分だけが表示されます。
ボーダーを同じスタイル、または別々にスタイルを変える場合は
「
border-style」を使用してください。
■スタイルの値
none：太さが0になり、ボーダーが表示されなくなります。
ボーダーに何も指定していない状態と同じであり、初期値です。
hidden：太さが0になり、ボーダーが表示されなくなります。
solid：１本線で表示。
double：２本線で表示。
ridge：立体的に出っ張った線で表示。
groove：立体的にへこんだ線で表示。
outset：ボーダーに囲まれた部分全てが立体的に出っ張った表示になります。
(上・右が暗く下・左が明るくなる)
inset：ボーダーに囲まれた部分全てが立体的にへこんだ表示になります。
(上・右が明るく、下・左が暗くなる)
dashed：破線で表示。
dotted：点線で表示。
記述例
--- CSSの記述 ---
/* 立体的に出っ張った線 */
.bd_bottom_style1{
border-bottom-style:ridge;
}
/* 点線 */
.bd_bottom_style2{
border-bottom-style:dotted;
}
--- HTMLの記述 ---
<P class="bd_bottom_style1">立体的に出っ張った線</P>
<H1 class="bd_bottom_style2">点線</H1>
ブラウザで表示
★左ボーダーの色・スタイル・太さを指定する
書式 border-left:色・太さ・スタイルの値
左ボーダーの色、太さ、スタイルを指定します。
複数指定する時は半角スペースで区切ります。
■色の値
色の名前・カラーコード：色名やカラーコード(#FFFF00等)で指定します。
transparent：ボーダーの色を透明にします。
■太さの値
数値：px・pt・ex・emなどの単位で指定します(例 1px 1em)
キーワード(thin/medium/thick)：thin（細い）、medium（通常）、thick（太い）の
キーワードで太さを指定します。
ブラウザによって太さが異なる場合があります。
■スタイルの値
none：太さが0になり、ボーダーが表示されなくなります。
ボーダーに何も指定していない状態と同じであり、初期値です。
hidden：太さが0になり、ボーダーが表示されなくなります。
solid：１本線で表示。
double：２本線で表示。
ridge：立体的に出っ張った線で表示。
groove：立体的にへこんだ線で表示。
outset：ボーダーに囲まれた部分全てが立体的に出っ張った表示になります。
(上・右が暗く下・左が明るくなる)
inset：ボーダーに囲まれた部分全てが立体的にへこんだ表示になります。
(上・右が明るく、下・左が暗くなる)
dashed：破線で表示。
dotted：点線で表示。
記述例
/* 赤色・6px・２本線 */
H1.borderleft_red_6_double{
border-left:#ff0000 6px double;
}
/* 青色・3px・点線 */
H1.borderleft_blue_3_dotted{
border-left:#0000ff 3px dotted;
padding:20px;
}
--- HTMLの記述 ---
<H1 class="borderleft_red_6_double">赤色・6px・２本線</H1>
<H1 class="borderleft_blue_3_dotted">青色・3px・点線</H1>
ブラウザで表示
赤色・6px・２本線
青色・3px・点線
★左ボーダーの色を指定する
書式 border-left-color:色名、カラーコード
左ボーダーの色を指定します。
左ボーダー以外の色は変わらないので、同じ色、または別々に色を変える場合は
「
border-color」を使用してください。
（左ボーダーのみ表示＋色指定する場合は「
border-left」を使用します）
また「border-style」等でボーダーのスタイル指定しないとボーダーが表示されません。
記述例
--- CSSの記述 ---
/* 青 */
.bd_leftcolor1{
border-style:solid;
border-left-color:#0000ff;
}
/* 茶 */
.bd_leftcolor2{
border-style:solid;
border-left-color:maroon;
}
--- HTMLの記述 ---
<H1 class="bd_leftcolor1">あいうえお</H1>
<H1 class="bd_leftcolor2">アイウエオ</H1>
ブラウザで表示
あいうえお
アイウエオ
★左ボーダーの太さを指定する
書式 border-left-width:左ボーダーの太さ
左ボーダーの太さを指定します。
左ボーダー以外の太さは変わらないので、同じ太さ、または別々に太さを変える場合は
「
border-width」を使用してください。
（左ボーダーのみ表示＋スタイル指定する場合は「
border-left」を使用します）
また「border-style」等でボーダーのスタイル指定しないとボーダーが表示されません。
■太さの値
数値：px・pt・ex・emなどの単位で指定します(例 1px 1em)
キーワード(thin/medium/thick)：thin（細い）、medium（通常）、thick（太い）の
キーワードで太さを指定します。
ブラウザによって太さが異なる場合があります。
記述例
--- CSSの記述 ---
/* 2.2em */
.bd_left_width1{
border-style:solid;
border-left-width:2.2em;
}
/* 7px */
.bd_left_width2{
border-style:solid;
border-left-width:7px;
}
--- HTMLの記述 ---
<P class="bd_left_width1">2.2emの左ボーダー</P>
<P class="bd_left_width2">7pxの左ボーダー</P>
ブラウザで表示
★左ボーダーのスタイルを指定する
書式 border-left-style:左ボーダーのスタイル
左ボーダーのスタイルを指定します。
プロパティのボーダー指定がborder-left-styleだけの場合
ボーダーの左部分だけが表示されます。
ボーダーを同じスタイル、または別々にスタイルを変える場合は
「
border-style」を使用してください。
■スタイルの値
none：太さが0になり、ボーダーが表示されなくなります。
ボーダーに何も指定していない状態と同じであり、初期値です。
hidden：太さが0になり、ボーダーが表示されなくなります。
solid：１本線で表示。
double：２本線で表示。
ridge：立体的に出っ張った線で表示。
groove：立体的にへこんだ線で表示。
outset：ボーダーに囲まれた部分全てが立体的に出っ張った表示になります。
(上・右が暗く下・左が明るくなる)
inset：ボーダーに囲まれた部分全てが立体的にへこんだ表示になります。
(上・右が明るく、下・左が暗くなる)
dashed：破線で表示。
dotted：点線で表示。
記述例
--- CSSの記述 ---
/* １本線 */
.bd_left_style1{
border-left-style:solid;
}
/* ２本線 */
.bd_left_style2{
border-left-style:double;
}
--- HTMLの記述 ---
<P class="bd_left_style1">１本線</P>
<H1 class="bd_left_style2">２本線</H1>
ブラウザで表示
