設定元件 邊線的風格。由於 border-style 的預設值為 none，沒有邊線；所以一定要將此特徵設為其它值，才能畫出邊線。有關元素的邊界請參考 border, margin, padding, outline。
一次設定四周邊線的三個特徵：寬（border-width），顏色（border-color），型態（border-style）。設定時，會先將所有邊線相關特徵設為預設值，然後再依後接的值設定個別的特徵；沒有個別設定值的特徵，就使用預設值。可設的特徵值請參考各項的說明。
- 風格用法：
<p style='border:8px solid red;
outline:4px solid white;
width:250px' >
好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲
</p> - 執行結果：
好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲
- 上例中，border 是紅色，outline 是白色。IE6 沒有 outline。
border-right
border-bottom
border-left
設定個別邊線的三個特徵：寬，顏色，型態。設定時，會先將所有邊線相關特徵設為預設值，然後再依後接的值設定個別的特徵；沒有個別設定值的特徵，就使用預設值。可設的特徵值請參考各項的說明。
- border-top 設定上邊線的三特徵。
- border-right 設定右邊線的三特徵。
- border-bottom 設定下邊線的三特徵。
- border-left 設定左邊線的三特徵。
- 風格用法：
<p style='border-top: 8px solid red;
border-right: 4px dashed green;
border-bottom:12px double blue;
border-left: 16px groove #f9f;
width:250px' >
好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲
</p> - 執行結果：
好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲
border-top-color
border-right-color
border-bottom-color
border-left-color
設定邊線的顏色。
- border-color 可以一次設定四個邊線顏色，其順序是上 右 下 左；只有一個值時，則四邊相同；如果少於四個時，則上下相同與左右相同。
- border-top-color 設定上邊線的顏色。
- border-right-color 設定右邊線的顏色。
- border-bottom-color 設定下邊線的顏色。
- border-left-color 設定左邊線的顏色。
- <color>：顏色值。
- transparent：透明。有佔空間，但是沒有著色。
- inherit：繼承父元件的特徵值。
- 風格用法：
<p style='border:8px solid;
border-color:red green;
width:250px' >
Not ask what your country can do for you, ask what you can do for your country.
</p>
<p style='border:8px solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
width:250px' >
Not ask what your country can do for you, ask what you can do for your country.
</p> - 執行結果：
Not ask what your country can do for you, ask what you can do for your country.
Not ask what your country can do for you, ask what you can do for your country.
- 上例中 border 與 border-color 的次序不可反過來，因為 border 會先將所有特徵設為預設值。
測試 transparent。
- 風格用法：
<p style='border:8px solid transparent;
background:skyblue;
width:250px' >
好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲
</p>
<div style='background:skyblue;
border-width:8px;
border-style:dotted;
width:250px' >
好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲
</div>
<p style='border:8px solid;
border-color:red transparent;
background:skyblue;
width:250px' >
好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲
</p>
<p style='background:skyblue;
border:8px solid;
border-top:double 12px red;
border-right: solid 8px transparent;
border-bottom: dotted 8px;
border-left-color: yellow;
width:250px' >
好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲
</p> - 執行結果：
好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲
好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲
好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲
- 上例顯示出 transparent 與沒設邊線顏色的差別。IE6 沒有支援 transparent；Firefox, Safari, Chrome 都成功。
- 上面出現一個很特殊的情形，在 IE6 中 DIV 與 P 元素的風格加上 width 或 height 的設定時，其邊線會使用父元素的背景色。使用時請多測試。
border-top-style
border-right-style
border-bottom-style
border-left-style
請參考 說明與範例。
border-top-width
border-right-width
border-bottom-width
border-left-width
設定邊線的寬度。
- border-width 可以一次設定四個邊線寬度。其順序是上 右 下 左。如果設定值少於四個時，其原則是，上下同寬與左右同寬。只有一個值時，則四邊同寬。
- border-top-width 設定上邊線的寬度。
- border-right-width 設定右邊線的寬度。
- border-bottom-width 設定下邊線的寬度。
- border-left-width 設定左邊線的寬度。
- <length>：長度值。 不可為負值。
- thin：細的邊線。
- medium：適中的邊線，此為預設值。
- thick：粗的邊線。
- inherit：繼承父元件的特徵值。
- 風格用法：
<p style='border:solid red;
border-width:4px 12px;
width:250px' >
好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲
</p>
<p style='border:solid green;
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 8px;
width:250px' >
好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲
</p> - 執行結果：
好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲
好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲
- 上例中 border 與 border-width 的次序不可反過來，因為 border 會先將所有特徵設為預設值。
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.bkg {border:solid 8px green;}
.bkg:hover {border: groove 8px red;
background:black;
color:white;
}
.bkg:active {border: dotted 8px blue;}
</style>
<a class=bkg href='javascript:void(0)'>
射擊遊戲, 好玩遊戲, 搏擊遊戲.
</a> - 執行結果： 射擊遊戲, 好玩遊戲, 搏擊遊戲.
javascript 應用。可以用 style 物件 的特徵 border, borderColor, borderStyle, borderWidth（及加上 Top, Right, Bottom, Left 的組合名稱）讀取或設定特徵值。
- 風格用法：
<div id='atr3' style='border:ridge 8px red; width:200px; height:150px'>
射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲.
</div>
<script type='text/javascript'>
var os=document.getElementById('atr3').style;
document.write( os.border
+'<br />'+ os.borderColor
+'<br />'+ os.borderTopWidth );
</script> - 執行結果：射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲.8px ridge red
red
8px
- 不同瀏覽器的輸出格式有不同。
