CSS - 边框属性

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

语法

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

属性值

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 边框属性示例

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

文本元素周围的边框

可以根据样式、宽度和颜色的选择为文本设置边框。以下示例中展示了这一点。

示例

Open Compiler

<!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>

图片元素周围的边框

也可以根据我们选择的样式、宽度和颜色为图片提供边框。以下示例中展示了这一点。

示例

Open Compiler

<!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_properties_reference.htm

打印页面