border-top-style
border-right-style
border-bottom-style
border-left-style
設定邊線的型態。
- border-style 可以一次設定四個邊線型態，其順序是上 右 下 左；只有一個值時，則四邊相同；如果少於四個時，則上下相同與左右相同。
- border-top-style 設定上邊線的型態。
- border-right-style 設定右邊線的型態。
- border-bottom-style 設定下邊線的型態。
- border-left-style 設定左邊線的型態。
由於 border-style 的預設值為 none，沒有邊線；所以一定要將此特徵設為其它值，才能畫出邊線。
可設的特徵值有：
- none：無邊線，border-width 會變成 0，此為預設值。雖然官方手冊說 border-width 會變成 0，可是不同瀏覽器作法有不同。
- hidden：與 none 相同，除了在 TABLE 元素上不同。請參考 邊線衝突解決法。
- dotted：點線。
- dashed：分段線。
- solid：單實心線。
- double：內外雙邊線。
- groove：內刻。
- ridge：凸出。
- inset：內縮。
- outset：外凸。畫 groove, ridge, inset, outset 會用到元件的顏色。
- 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> - 執行結果：
子曰：學而時習之，不亦說乎？
initial / initial
- 邊線的型態設為 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> - 執行結果：
dotted: 子曰：學而時習之，不亦說乎？
dashed: 子曰：學而時習之，不亦說乎？
solid: 子曰：學而時習之，不亦說乎？
double: 子曰：學而時習之，不亦說乎？
groove: 子曰：學而時習之，不亦說乎？
ridge: 子曰：學而時習之，不亦說乎？
inset: 子曰：學而時習之，不亦說乎？
outset: 子曰：學而時習之，不亦說乎？
- 在 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> - 執行結果：
子曰：學而時習之，不亦說乎？
groove
groove
- 上例中，在 Firefox 的 os.borderStyle 其輸出是 groove groove groove groove，共四個 groove；在 IE, Safari, Chrome 則是一個 groove。
