border, border-color, border-style, border-width

設定元件 邊線的風格。由於 border-style 的預設值為 none，沒有邊線；所以一定要將此特徵設為其它值，才能畫出邊線。有關元素的邊界請參考 border, margin, padding, outline。

border | border-上右下左 | border-color | border-style | border-width

border

一次設定四周邊線的三個特徵：寬（border-width），顏色（border-color），型態（border-style）。設定時，會先將所有邊線相關特徵設為預設值，然後再依後接的值設定個別的特徵；沒有個別設定值的特徵，就使用預設值。可設的特徵值請參考各項的說明。 <p style='border:8px solid red; outline:4px solid white; width:250px' > 好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲 </p>

• 上例中，border 是紅色，outline 是白色。IE6 沒有 outline。

border-top
border-right
border-bottom
border-left

設定個別邊線的三個特徵：寬，顏色，型態。設定時，會先將所有邊線相關特徵設為預設值，然後再依後接的值設定個別的特徵；沒有個別設定值的特徵，就使用預設值。可設的特徵值請參考各項的說明。

1. border-top 設定上邊線的三特徵。
2. border-right 設定右邊線的三特徵。
3. border-bottom 設定下邊線的三特徵。
4. 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-color
border-top-color
border-right-color
border-bottom-color
border-left-color

設定邊線的顏色。

1. border-color 可以一次設定四個邊線顏色，其順序是上 右 下 左；只有一個值時，則四邊相同；如果少於四個時，則上下相同與左右相同。
2. border-top-color 設定上邊線的顏色。
3. border-right-color 設定右邊線的顏色。
4. border-bottom-color 設定下邊線的顏色。
5. border-left-color 設定左邊線的顏色。

如果沒有設邊線顏色，則以元件的顏色（color）為邊線顏色，通常是文字顏色。可設的特徵值有：

1. <color>：顏色值。
2. transparent：透明。有佔空間，但是沒有著色。
3. 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>

• 上例中 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-style
border-top-style
border-right-style
border-bottom-style
border-left-style

請參考 說明與範例。

border-width
border-top-width
border-right-width
border-bottom-width
border-left-width

設定邊線的寬度。

1. border-width 可以一次設定四個邊線寬度。其順序是上 右 下 左。如果設定值少於四個時，其原則是，上下同寬與左右同寬。只有一個值時，則四邊同寬。
2. border-top-width 設定上邊線的寬度。
3. border-right-width 設定右邊線的寬度。
4. border-bottom-width 設定下邊線的寬度。
5. border-left-width 設定左邊線的寬度。

可設的特徵值有：

1. <length>：長度值。 不可為負值。
2. thin：細的邊線。
3. medium：適中的邊線，此為預設值。
4. thick：粗的邊線。
5. 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>

• 不同瀏覽器的輸出格式有不同。