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

列印頁面