CSS - border-right-color 屬性

CSS 的 **border-right-color** 屬性指定元素右側邊框的顏色。在使用此屬性之前，必須宣告 border-right-style 屬性。

語法

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

屬性值

值	描述
color	指定邊框的顏色。可以使用不同的顏色格式（名稱、rgb 值、十六進位制值、hsl 值等）。預設顏色為元素的當前顏色。
transparent	指定邊框必須透明。
initial	將屬性設定為其預設值。
inherit	從父元素繼承該屬性。

CSS 右邊框顏色屬性示例

以下示例使用不同的值解釋了 **border-right-color** 屬性。

使用顏色名稱的右邊框顏色屬性

可以使用顏色名稱（例如紅色、藍色等）設定右側邊框顏色。指定的顏色將應用於邊框。在以下示例中，邊框使用了顏色名稱。

示例

    
<!DOCTYPE html>
<html>

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

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

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

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

</html>

使用十六進位制值的右邊框顏色屬性

可以使用十六進位制值（例如 #ff0000）設定右側邊框顏色。指定的顏色將應用於邊框。在以下示例中，邊框使用了十六進位制值。

示例

    
<!DOCTYPE html>
<html>

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

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

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

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

</html>

使用 RGB 值的右邊框顏色屬性

可以使用 rgb 值（例如 rgb(255, 0, 0)）設定右側邊框顏色。指定的顏色將應用於邊框。在以下示例中，邊框使用了 rgb 值。

示例

    
<!DOCTYPE html>
<html>

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

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

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

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

</html>

使用 HSL 值的右邊框顏色屬性

可以使用 hsl 值（例如 hsl(0, 100%, 50%)）設定右側邊框顏色。指定的顏色將應用於邊框。在以下示例中，邊框使用了 hsl 值。

示例

    
<!DOCTYPE html>
<html>

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

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

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

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

</html>

使用透明值的右邊框顏色屬性

要設定透明的右側邊框，我們使用 transparent 值。在以下示例中，邊框使用了 transparent 值。

示例

    
<!DOCTYPE html>
<html>

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

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

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

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

</html>

支援的瀏覽器

屬性
border-right-color	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

列印頁面