CSS - border-top-color 属性

CSS border-top-color 属性指定元素的上边框颜色。在使用此属性之前，必须声明 border-top-style。

语法

border-top-color: color | transparent | initial | inherit;

属性值

值	描述
color	它指定边框的颜色。可以使用不同的颜色格式（名称、rgb 值、十六进制值、hsl 值等）。默认颜色是元素的当前颜色。
transparent	它指定边框必须是透明的。
initial	这将属性设置为其默认值。
inherit	这从父元素继承属性。

CSS 上边框颜色属性示例

以下示例使用不同的值解释了 border-top-color 属性。

使用颜色名称的上边框颜色属性

可以使用颜色名称（例如 red、blue 等）设置上边框颜色。指定的颜色将应用于边框。在以下示例中，颜色名称已用于边框。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .properties {
            text-align: center;
            padding: 12px;
            border-top-width: 10px;
        }

        .heading {
            background-color: lightgreen;
            border-top-style: solid;
            border-top-color: red;
        }

        .border {
            border: 5px solid #a6890c;
            border-top-style: dashed;
            border-top-color: green;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-top-color property
    </h2>
    <h3 class="properties heading">
        This heading has 'red' border-top-color
    </h3>
    <p class="properties border">
        This border has 'green' border-top-color
    </p>
</body>

</html>

使用十六进制值的上边框颜色属性

可以使用十六进制值（例如 #ff0000）设置上边框颜色。指定的颜色将应用于边框。在以下示例中，十六进制值已用于边框。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .properties {
            text-align: center;
            padding: 12px;
            border-top-width: 10px;
        }

        .heading {
            background-color: lightgreen;
            border-top-style: solid;
            border-top-color: #ffaa00;
        }

        .border {
            border: 5px solid #a6890c;
            border-top-style: dashed;
            border-top-color: #ff3333;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-top-color property
    </h2>
    <h3 class="properties heading">
        This heading has '#ffaa00' border-top-color
    </h3>
    <p class="properties border">
        This border has '#ff3333' border-top-color
    </p>
</body>

</html>

使用 RGB 值的上边框颜色属性

可以使用 rgb 值（例如 rgb(255, 0, 0)）设置上边框颜色。指定的颜色将应用于边框。在以下示例中，rgb 值已用于边框。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .properties {
            text-align: center;
            padding: 12px;
            border-top-width: 10px;
        }

        .heading {
            background-color: lightgreen;
            border-top-style: solid;
            border-top-color: rgb(0, 0, 179);
        }

        .border {
            border: 5px solid #a6890c;
            border-top-style: dashed;
            border-top-color: rgb(0, 153, 77);
        }
    </style>
</head>

<body>
    <h2>
        CSS border-top-color property
    </h2>
    <h3 class="properties heading">
        This heading has 'rgb(0, 0, 179)' border-top-color
    </h3>
    <p class="properties border">
        This border has 'rgb(0, 153, 77)' border-top-color
    </p>
</body>

</html>

使用 HSL 值的上边框颜色属性

可以使用 hsl 值（例如 hsl(0, 100%, 50%)）设置上边框颜色。指定的颜色将应用于边框。在以下示例中，hsl 值已用于边框。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .properties {
            text-align: center;
            padding: 12px;
            border-top-width: 10px;
        }

        .heading {
            background-color: lightgreen;
            border-top-style: solid;
            border-top-color: hsl(180, 100%, 15%);
        }

        .border {
            border: 5px solid #a6890c;
            border-top-style: dashed;
            border-top-color: hsl(120, 50%, 40%);
        }
    </style>
</head>

<body>
    <h2>
        CSS border-top-color property
    </h2>
    <h3 class="properties heading">
        This heading has 'hsl(180, 100%, 15%)' border-top-color
    </h3>
    <p class="properties border">
        This border has 'hsl(120, 50%, 40%)' border-top-color
    </p>
</body>

</html>

使用透明值的上边框颜色属性

要设置透明的上边框，我们使用 transparent 值。在以下示例中，transparent 值已用于边框。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .properties {
            text-align: center;
            padding: 12px;
            border-top-width: 10px;
        }

        .heading {
            background-color: lightgreen;
            border-top-style: solid;
            border-top-color: transparent;
        }

        .border {
            border: 5px solid #a6890c;
            border-top-style: dashed;
            border-top-color: transparent;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-top-color property
    </h2>
    <h3 class="properties heading">
        This heading has 'transparent' border-top-color
    </h3>
    <p class="properties border">
        This border has 'transparent' border-top-color
    </p>
</body>

</html>

支持的浏览器

属性
border-top-color	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

打印页面