在CSS中，幾乎所有的元件都可以使用框線設定，不像HTML般，只有表格才可使用框線。我們不但可任意控制框線粗細、顏色，就連框線的形式都可以設定。
功能 :設定邊框
語法 : { BORDER : ( border-width )︱( border-style )︱( color ) }
( border-width ) - 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px
( border-style ) - 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線
( color ) - 可設為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 )
表紅綠藍強度
範例 : {BORDER:THICK DOUBLE RED}
功能 : 設定下邊框
語法 : { BORDER-BOTTOM : ( border-bottom-width )︱( border-style )︱( color ) }
範例 : {BORDER-BOTTOM:GROOVE #00FF00}
功能 : 設定下邊框顏色，可設為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度
語法 : { BORDER-BOTTOM-COLOR : ( color ) }
範例 : {BORDER-BOTTOM-COLOR:BLUE}
功能 : 設定下邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 )
語法 : { BORDER-BOTTOM-STYLE : NONE︱SOLID︱DOUBLE︱GROOVE︱RIDGE︱INSET︱OUTSET }
範例 : {BORDER-BOTTOM-STYLE:INSET}
功能 : 設定下邊框寬度 ( 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px )
語法 : { BORDER-BOTTOM-WIDTH : THIN︱MEDIUM︱THICK︱( length ) }
範例 : {BORDER-BOTTOM-WIDTH:1cm}
功能 : 設定邊框顏色，可設為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度
語法 : { BORDER-COLOR : ( color ) }
範例 : {BORDER-COLOR:#FFFF00}
功能 : 設定左邊框
語法 : { BORDER-LEFT : ( border-left-width )︱( border-style )︱( color ) }
範例 : {BORDER-LEFT:THIN OUTSET}
功能 : 設定左邊框顏色，可設為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度
語法 : { BORDER-LEFT-COLOR : ( color ) }
範例 : {BORDER-LEFT-COLOR:#00FF00}
功能 : 設定左邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 )
語法 : { BORDER-LEFT-STYLE : NONE︱SOLID︱DOUBLE︱GROOVE︱RIDGE︱INSET︱OUTSET }
範例 : {BORDER-LEFT-STYLE:RIDGE}
功能 : 設定左邊框寬度 ( 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px )
語法 : { BORDER-LEFT-WIDTH : THIN︱MEDIUM︱THICK︱( length ) }
範例 : {BORDER-LEFT-WIDTH:THICK}
功能 : 設定右邊框
語法 : { BORDER-RIGHT : ( border-right-width )︱( border-style )︱( color ) }
範例 : {BORDER-RIGHT:10pt #00A}
功能 : 設定右邊框顏色，可設為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度
語法 : { BORDER-RIGHT-COLOR : ( color ) }
範例 : {BORDER-RIGHT-COLOR:#00F}
功能 : 設定右邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 )
語法 :
{ BORDER-RIGHT-STYLE : NONE︱SOLID︱DOUBLE︱GROOVE︱RIDGE︱INSET︱OUTSET }
範例 :
{BORDER-RIGHT-STYLE:GROOVE}
功能 : 設定右邊框寬度 ( 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px )
語法 : { BORDER-RIGHT-WIDTH : THIN︱MEDIUM︱THICK︱( length ) }
範例 : {BORDER-RIGHT-WIDTH:10px}
功能 : 設定邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 )
語法 : { BORDER-STYLE : NONE︱SOLID︱DOUBLE︱GROOVE︱RIDGE︱INSET︱OUTSET }
範例 : {BORDER-STYLE:DOUBLE}
功能 : 設定上邊框
語法 : { BORDER-TOP : ( border-top-width )︱( border-style )︱( color ) }
範例 : {BORDER-TOP:1in YELLOW}
功能 : 設定上邊框顏色，可設為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度
語法 : { BORDER-TOP-COLOR : ( color ) }
範例 : {BORDER-TOP-COLOR:RED}
功能 : 設定上邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 )
語法 : { BORDER-TOP-STYLE : NONE︱SOLID︱DOUBLE︱GROOVE︱RIDGE︱INSET︱OUTSET }
範例 : {BORDER-TOP-STYLE:SOLID}
功能 : 設定上邊框寬度 ( 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px )
語法 : { BORDER-TOP-WIDTH : THIN︱MEDIUM︱THICK︱( length ) }
範例 : {BORDER-TOP-WIDTH:THIN}
功能 : 設定邊框寬度 ( 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px )
語法 : { BORDER-WIDTH : THIN︱MEDIUM︱THICK︱( length ) }
範例 : {BORDER-WIDTH:10pt}
<SCRIPT LANGUAGE="JavaScript">
function change(index)
{
index.style.borderStyle="inset";
index.style.color="blue";
}
function rechange(index)
{
index.style.borderStyle="outset";
index.style.color="black";
}
</SCRIPT>
<HTML>
<HEAD>
<STYLE>
SPAN {position:absolute;border:outset 3px;
width:80px;height:22px;cursor:hand;
background:url(../Graph/001.jpg);text-align:center;
font-size:18px;color:black;font-family:Arial}
</STYLE>
</HEAD>
<BODY>
<SPAN STYLE="top:5px;left:5px" onMouseOver=change(this)
onMouseOut=rechange(this)>HTML</SPAN>
<SPAN STYLE="top:35px;left:5px" onMouseOver=change(this)
onMouseOut=rechange(this)>CSS</SPAN>
<SPAN STYLE="top:65px;left:5px" onMouseOver=change(this)
onMouseOut=rechange(this)>JScript</SPAN>
<SPAN STYLE="top:95px;left:5px" onMouseOver=change(this)
onMouseOut=rechange(this)>Java</SPAN>
<SPAN STYLE="top:125px;left:5px" onMouseOver=change(this)
onMouseOut=rechange(this)>CGI</SPAN>
<SPAN STYLE="top:155px;left:5px" onMouseOver=change(this)
onMouseOut=rechange(this)>ASP</SPAN>
</BODY>
</HTML>