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

border | border-color | border-style | border-width

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

設定邊線的型態。

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

由於 border-style 的預設值為 none，沒有邊線；所以一定要將此特徵設為其它值，才能畫出邊線。

可設的特徵值有：

1. none：無邊線，border-width 會變成 0，此為預設值。雖然官方手冊說 border-width 會變成 0，可是不同瀏覽器作法有不同。
2. hidden：與 none 相同，除了在 TABLE 元素上不同。請參考 邊線衝突解決法。
3. dotted：點線。
4. dashed：分段線。
5. solid：單實心線。
6. double：內外雙邊線。
7. groove：內刻。
8. ridge：凸出。
9. inset：內縮。
10. outset：外凸。畫 groove, ridge, inset, outset 會用到元件的顏色。
11. inherit：繼承父元件的特徵值。

測試 none。 <span id='none' style='border:red none'> 子曰：學而時習之，不亦說乎？</span><p> <script type='text/javascript'> var o=document.getElementById('none'); document.write( o.style.borderWidth +' / '+ o.style.borderBottomWidth ); </script>

• 邊線的型態設為 none，但是很多瀏覽器並沒有將 border-width 變成 0。上例用到 javascript 的 style.borderWidth。

各種形狀的邊線。 <style type='text/css'> .bdrs SPAN {background:skyblue} </style> <div class=bdrs> dotted: <span style='border:8px dotted red'>子曰：學而時習之，不亦說乎？</span><br /><br /><br /> dashed: <span style='border:8px dashed red'>子曰：學而時習之，不亦說乎？</span><br /><br /><br /> solid: <span style='border:8px solid red'>子曰：學而時習之，不亦說乎？</span><br /><br /><br /> double: <span style='border:8px double red'>子曰：學而時習之，不亦說乎？</span><br /><br /><br /> groove: <span style='border:8px groove red'>子曰：學而時習之，不亦說乎？</span><br /><br /><br /> ridge: <span style='border:8px ridge red'>子曰：學而時習之，不亦說乎？</span><br /><br /><br /> inset: <span style='border:8px inset red'>子曰：學而時習之，不亦說乎？</span><br /><br /><br /> outset: <span style='border:8px outset red'>子曰：學而時習之，不亦說乎？</span> </div>

• 在 IE6, Firefox 中，dotted 是由小圓餅組成；在 Safari, Chrome 則是由小方格組成。其它項目在不同瀏覽器的展現結果也有小差異。

上右下左邊線型態設定。 上右下左：<span style='border:8px red; border-top-style: dotted; border-right-style: double; border-bottom-style: dashed; border-left-style: ridge;'> 子曰：學而時習之，不亦說乎？</span>

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .bkg {border:solid 8px red;} .bkg:hover {border-style: dotted; background:black; color:white; } .bkg:active {border-style: groove;} </style> <a class=bkg href='javascript:void(0)'> 射擊遊戲, 好玩遊戲, 搏擊遊戲. </a>

javascript 應用。可以用 style 物件 的特徵 borderStyle, borderTopStyle, borderRightStyle, borderBottomStyle, borderLeftStyle, 讀取或設定邊線型態。下例還用到 setInterval()。 <span id='js' style='border:groove 16px red'> 子曰：學而時習之，不亦說乎？</span> <p> <script type='text/javascript'> function swStyle() { var os=document.getElementById('js').style; os.borderStyle=( os.borderTopStyle == 'groove' ) ? 'ridge' : 'groove'; } setInterval( swStyle, 500); var os=document.getElementById('js').style; document.write( os.borderStyle +'<br />'+ os.borderTopStyle ); </script>

• 上例中，在 Firefox 的 os.borderStyle 其輸出是 groove groove groove groove，共四個 groove；在 IE, Safari, Chrome 則是一個 groove。