CSS - border 属性_CSS 菜鸟教程

CSS border 是一个速记属性，它设置元素周围边框的边框样式、宽度和颜色。如果未指定颜色，则将应用文本的颜色。

语法


border: border-width border-style border-color | initial | inherit;

属性值

值	描述
border-width	指定边框的宽度。默认值为“medium”。
border-style	指定边框的样式。默认值为“None”。
border-color	指定边框的颜色。默认值是文本的颜色。
initial	将属性设置为其初始值。
inherit	将继承父元素的属性。

CSS Border 属性的示例

以下示例演示如何将所有三个属性结合使用到一个属性中。这是最常用于在任何元素周围设置边框的属性。

文本元素周围的边框

可以通过选择样式、宽度和颜色为文本提供边框。以下示例显示了这一点。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 p {
	 	 	 	 	 	 padding: 20px;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS border property</h2>
	 	 <p style="border:5px solid red;">
	 	 	 	 4px width solid style and red color
	 	 </p>
	 	 <p style="border:5px dotted blue;">
	 	 	 	 5px width dotted style and blue color
	 	 </p>
	 	 <p style="border:5px dashed green;">
	 	 	 	 5px width dashed style and green color
	 	 </p>
	 	 <p style="border:5px dashed;">
	 	 	 	 5px width dashed style and color of the text
	 	 </p>
</body>

</html>

图像元素周围的边框

还可以通过我们的样式、宽度和颜色为图像提供边框。以下示例显示了这一点。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 p {
	 	 	 	 	 	 padding: 20px;
	 	 	 	 	 	 color: white;
	 	 	 	 }

	 	 	 	 .img {
	 	 	 	 	 	 background-image: url(/css/images/pink-flower.jpg);
	 	 	 	 	 	 width: 200px;
	 	 	 	 	 	 height: 200px;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS border property</h2>
	 	 <p style="border:5px solid red;" class="img">
	 	 	 	 4px width solid style and red color
	 	 </p>
	 	 <p style="border:5px dotted blue;" class="img">
	 	 	 	 5px width dotted style and blue color
	 	 </p>
	 	 <p style="border:5px dashed green;" class="img">
	 	 	 	 5px width dashed style and green color
	 	 </p>
	 	 <p style="border:5px dashed ;" class="img">
	 	 	 	 5px width dashed style and color of the text
	 	 </p>
</body>

</html>

支持的浏览器

属性
border	1.0	4.0	1.0	1.0	3.5

<< CSS - background-size 属性 CSS - border-block-color 属性 >>