border屬性允許您指定表示元素的框的邊框的外觀。邊界有三個屬性可以更改&負;
邊框顏色指定邊框的顏色。
邊框樣式指定邊框是實線、虛線、雙線還是其他可能值之一。
邊框寬度指定邊框的寬度。
現在，我們將通過示例了解如何使用這些屬性。
The border-color Property
border color屬性允許您更改元素周圍邊框的顏色。可以使用屬性−分別更改元素邊框的底部、左側、頂部和右側的顏色;
邊框底部顏色更改底部邊框的顏色。
邊框頂部顏色更改頂部邊框的顏色。
邊框左邊框顏色更改左邊框的顏色。
邊框右邊框顏色更改右邊框的顏色。
下面的示例顯示了所有這些屬性的效果;
<html>
<head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class = "example1">
This example is showing all borders in different colors.
</p>
<p class = "example2">
This example is showing all borders in green color only.
</p>
</body>
</html>
它將產生以下結果&負;
The border-style Property
border style屬性允許您選擇下列border−樣式之一;
無無邊框。（相當於邊框寬度：0;）
實線−Border是一條實線。
點−Border是一系列點。
虛線是一系列短線。
double−Border是兩條實線。
groove−邊框看起來就像是刻在頁面上的。
脊−邊框看起來與凹槽相反。
插入−邊框使框看起來像是嵌入到頁面中。
開始−邊框使框看起來像是從畫布中出來的。
隱藏−與「無」相同，但表元素的邊界衝突解決方法不同。
您可以使用以下屬性分別更改元素的下邊框、左邊框、上邊框和右邊框的樣式−
邊框底部樣式更改底部邊框的樣式。
邊框頂部樣式更改頂部邊框的樣式。
border left style更改左邊框的樣式。
邊框右樣式更改右邊框的樣式。
下面的示例顯示了所有這些邊框樣式−
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
This is a dashed border.
</p>
<p style = "border-width:4px; border-style:double;">
This is a double border.
</p>
<p style = "border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
</body>
</html>
它將產生以下結果&負;
The border-width Property
border width屬性允許您設置元素邊框的寬度。此屬性的值可以是以px、pt或cm爲單位的長度，也可以設置爲薄、中或厚。
您可以使用以下屬性分別更改元素的底部、頂部、左側和右側邊框的寬度−
邊框底部寬度更改底部邊框的寬度。
邊框頂部寬度更改頂部邊框的寬度。
border left width更改左邊框的寬度。
border right width更改右邊框的寬度。
下面的示例顯示了所有這些邊框寬度−
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style = "border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style = "border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style = "border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style = "border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style = "border-bottom-width:4px;border-top-width:10px;
border-left-width: 2px;border-right-width:15px;border-style:solid;">
This is a a border with four different width.
</p>
</body>
</html>
它將產生以下結果&負;
Border Properties Using Shorthand
border屬性允許您在一個屬性中指定線條的顏色、樣式和寬度;
下面的示例演示如何將所有三個屬性都使用到單個屬性中。這是在任何元素周圍設置邊框最常用的屬性。
<html>
<head>
</head>
<body>
<p style = "border:4px solid red;">
This example is showing shorthand property for border.
</p>
</body>
</html>
它將產生以下結果&負;