border 属性允许您指定表示元素的框的边框应该如何显示.您可以更改和减去边框的三个属性;
border-color 指定边框的颜色.
border-style 指定边框应该是实线，虚线，双线还是其中一个可能的值.
border-width 指定边框的宽度.
现在，我们将看到如何将这些属性与示例一起使用.
border-color属性允许您更改元素周围边框的颜色.您可以使用属性 : 来单独更改元素边框的底部，左侧，顶部和右侧的颜色;
border-bottom-color 更改底部边框的颜色.
border-top-color 更改顶部边框的颜色.
border-left-color 更改左边框的颜色.
border-right-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>border-style属性允许您选择以下样式的border之一:
none :无边界。 （相当于border-width:0;）
solid:边界是一条实线。
dotted :边框是一系列的点。
dashed :边界是一系列短线。
double :边界是两条实线。
groove :边框看起来好像刻在页面上。
ridge :边框看起来与凹槽相反。
inset :边框使框看起来像嵌入在页面中。
outset :边框使框看起来像是从画布中出来的。
hidden :;除了表元素的边界冲突解决方案外，与否相同。
您可以使用以下属性单独更改元素的底部，左侧，顶部和右侧边框的样式;
border-bottom-style改变底部边框的样式。
border-top-style改变顶部边框的样式。
border-left-style改变左边框的样式。
border-right-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>
border-width属性允许您设置元素边框的宽度。 此属性的值可以是px，pt或cm的长度，也可以设置为thin，medium或thick。
您可以使用以下属性和减号单独更改元素的底部，顶部，左侧和右侧边框的宽度;
border-bottom-width更改底部边框的宽度。
border-top-width更改顶部边框的宽度。
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属性允许您在一个属性和减号中指定行的颜色，样式和宽度;
以下示例显示如何将所有三个属性用于单个属性。 这是在任何元素周围设置边框的最常用属性。
<html> <head> </head> <body> <p style = "border:4px solid red;"> This example is showing shorthand property for border. </p> </body> </html>
