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

打印页面