CSS Border Color

2025年3月17日 | 阅读 7 分钟

边框颜色是 CSS 属性，用于为 HTML 元素的边框应用颜色。HTML 元素的内边距和外边距之间的颜色称为边框颜色。

重要的是要知道要使用 border-color 属性。您需要首先定义 border-style 属性，这意味着仅 border-color 属性是不够的。

在使用 HTML 元素时，您可以选择为每个边（包括上、下、左、右）设置边框值。您可以为所有边应用相同的颜色，也可以为每边指定不同的颜色。

CSS 边框颜色语法

为 HTML 元素分配边框颜色会增加样式并使网站看起来更具吸引力。

在样式化边框时，首先想到的是颜色，这是任何设计师工具包中的关键元素。它对用户影响很大，这使其在边框样式化中必不可少。让我们讨论可用于定义颜色的 CSS 颜色格式。

CSS 颜色格式

有多种颜色格式用于定义边框颜色。格式如下：

标准颜色名称

CSS 中预定义的颜色称为标准颜色名称，例如“violet”、“aqua”、“indigo”等。

代码

RGB 值

RGB 是红、绿、蓝的首字母缩写。颜色的强度通过为每个颜色分量使用 0 到 255 之间的整数来定义。

代码

RGBA（红、绿、蓝、Alpha）值

RGBA 是红、绿、蓝和 Alpha 的首字母缩写。RGBA 是一种与 RGB 类似的颜色模型。在 RGBA 中，颜色的强度通过为前三个参数使用 0 到 255 之间的整数来指定。RGBA 还包含一个用于不透明度的附加值，称为“Alpha”，其范围从 0 到 1。“Alpha”值用于定义颜色的透明度。

代码

十六进制 (Hex) 值

十六进制颜色使用六个字母数字字符 (#RRGGBB) 表示，它们表示红、绿、蓝分量的强度。

代码

3 位十六进制 (Hex) 值

它是某些六位十六进制值的简写值。

代码

HSL 值

HSL 是色相、饱和度和亮度的首字母缩写。色相参数以 0 到 360 度定义，饱和度参数和亮度参数以 0% 到 100% 的百分比定义。

HSLA 值

HSLA 是色相、饱和度、亮度和 Alpha 的首字母缩写。它与 HSL 相似，但 HSLA 包含一个用于不透明度的附加值，称为“Alpha”，其范围从 0 到 1。

代码

CSS 各个边的边框颜色

我们可以使用 border-left-color、border-right-color、border-top-color 和 border-bottom-color 属性为 HTML 元素的各个边设置边框值。这些属性允许您为 HTML 元素边框的每个边设置不同的颜色。

语法 1

它指定顶部的边框颜色。

语法 2

它指定右侧的边框颜色。

语法 3

它指定底部的边框颜色。

语法 4

它指定左侧的边框颜色。

演示 CSS 各个边的边框颜色的示例

在此示例中，我们将使用标准颜色名称值来指定 HTML 元素的不同边。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of the CSS border-color for individual sides</title>
    <style>
        h1 {
            text-align: center;
        }
        p {
    padding: 10px;
    margin: 10px;
    border-style: solid;
    text-align: center;
    font-size: 18px;
    border-width: 6px;
}
.top {
    border-top-color: violet;
}
.right {
    border-right-color: palevioletred;
}
.bottom {
    border-bottom-color: lawngreen;
}
.left {
    border-left-color: orange;
}
.all-sides {
    border-top-color: violet;
    border-right-color: palevioletred;
    border-bottom-color: lawngreen;
    border-left-color: orange;
}
    </style>
</head>
<body>
    <h1>Example to demonstrate the CSS border color for individual sides</h1>
    <p class="top">
        It specifies the color of the border from the top.
    </p>
    <p class="right">
        It specifies the color of the border from the right.
    </p>
    <p class="bottom">
        It specifies the color of the border from the bottom.
    </p>
    <p class="left">
        It specifies the color of the border from the left.
    </p>
    <p class="all-sides">
        It specifies the different colors of the border from all sides.
    </p>
</body>
</html>

输出

CSS 边框颜色简写属性

在此示例中，我们将使用标准颜色名称值通过简写属性指定 HTML 元素的边框颜色。

语法 1

上述语法对 HTML 元素的所有边应用相同的颜色。

语法 2

上述语法对 HTML 元素应用相同的上下边框颜色和相同的左右边框颜色。

语法 3

上述语法适用于一个 HTML 元素，其顶部边框颜色不同，左右边框颜色相同，底部边框颜色不同。

语法 4

border-color: top-border-color right-border-color bottom-border-color left-border-color;

上述语法用于为 HTML 元素的所有边应用不同的颜色。

演示使用简写属性的 CSS 边框颜色的示例

在此示例中，我们将使用标准颜色名称值通过 HTML 元素的 CSS 简写属性指定边框颜色。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of the CSS border-color shorthand properties</title>
    <style>
        h1 {
            text-align: center;
        }
    p {
        margin: 10px;
        padding: 10px;
        font-size: 15px;
        font-family: 'Courier New', Courier, monospace;
        border-style: solid;
        border-width: 9px;
        text-align: center;
    } 
    .paragraph-1 {
        border-color: blue;
    }
    .paragraph-2 {
        border-color: brown pink;
    }
    .paragraph-3 {
        border-color: brown pink orange;
    }
    .paragraph-4 {
        border-color: brown pink orange green;
    }
    </style>
</head>
<body>
   <h1>Example to demonstrate the CSS border-color shorthand properties</h1>
   <div>
    <p class="paragraph-1">In paragraph-1, the same border color has been applied on all sides.</p>
   </div>
   <div>
    <p class="paragraph-2">In paragraph-2, the color of the top and bottom borders are the same, and the color of the right and left borders are the same.</p>
   </div>
   <div>
    <p class="paragraph-3">In paragraph 3, a different border color has been applied at the top, the same border color has been applied on the left and right, and a different border color has been applied at the bottom.</p>
   </div>
   <div>
    <p class="paragraph-4">In paragraph-4, different border colors are applied to the top, right, bottom, and left borders at the same time.</p>
   </div>
</body>
</html>

输出

使用 RGB（红、绿、蓝）和 RGBA（红、绿、蓝、Alpha）颜色值应用边框颜色

我们将使用 RGB（红、绿、蓝）和 RGBA（红、绿、蓝、Alpha）值来定义 HTML 元素的边框颜色。

演示使用 RGB 和 RGBA 颜色值的 CSS 边框颜色的示例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of the CSS border-color using RGB and RGBA color values</title>
    <style>
        h1 {
            text-align: center;
        }
        p{
            padding: 15px;
            margin: 15px;
            border-style: solid;
            text-align: center;
            font-size: 18px;
            border-width: 18px;
        }
        .rgb1{
            border-color: rgb(174, 166, 9);
        }
        .rgba1{
            border-color: rgb(174, 166, 9, 0.6);
        }
        .rgb2{
            border-color: rgb(60, 210, 152);
        }
        .rgba2{
            border-color: rgb(60, 210, 152, 0.6);
        }
    </style>
</head>
<body>
    <h1>Example to demonstrate the CSS border color using RGB and RGBA color values</h1>
    <div>
        <p class="rgb1">It specifies border color with RGB value.</p>
        <p class="rgba1">It specifies border color with RGBA value.</p>
        <p class="rgb2">It specifies border color with RGB value.</p>
        <p class="rgba2">It specifies border color with RGBA value.</p>
    </div>
</body>

输出

使用 HSL（色相、饱和度、亮度）和 HSLA（色相、饱和度、亮度、Alpha）颜色值应用边框颜色

我们将使用 HSL（色相、饱和度、亮度）和 HSLA（色相、饱和度、亮度、Alpha）值来定义 HTML 元素的边框颜色。

演示使用 HSL 和 HSLA 颜色值的 CSS 边框颜色的示例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of the CSS border-color using HSL and HSLA color values</title>
    <style>
        h1 {
            text-align: center;
        }
        p{
            padding: 15px;
            margin: 15px;
            border-style: solid;
            text-align: center;
            font-size: 18px;
            border-width: 18px;
        }
        .hsl1{
            border-color: hsl(0, 100%, 50%);
        }
        .hsla1{
            border-color: hsla(0, 100%, 50%, 0.5);
        }
        .hsl2{
            border-color: hsl(306, 79%, 72%);
        }
        .hsla2{
            border-color: hsla(306, 79%, 72%, 0.5);
        }
    </style>
</head>
<body>
    <h1>Example to demonstrate the CSS border color using HSL and HSLA color values</h1>
    <div>
        <p class="hsl1">It specifies border color with HSL value.</p>
        <p class="hsla1">It specifies border color with HSLA value.</p>
        <p class="hsl2">It specifies border color with HSL value.</p>
        <p class="hsla2">It specifies border color with HSLA value.</p>
    </div>
</body>
</html>

输出

使用十六进制 (Hex) 和 3 位十六进制 (Hex) 颜色值应用边框颜色

我们将使用十六进制 (Hex) 值和 3 位十六进制 (Hex) 值来定义 HTML 元素的边框颜色。

演示使用十六进制 (Hex) 和 3 位十六进制 (Hex) 颜色值的 CSS 边框颜色的示例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of the CSS border color using hexadecimal and 3-digit hexadecimal color values</title>
    <style>
        h1 {
            text-align: center;
        }
        p{
            padding: 15px;
            margin: 15px;
            border-style: solid;
            text-align: center;
            font-size: 18px;
            border-width: 18px;
        }
        .hex1{
            border-color: #ee44bb;;
        }
        .hex2{
            border-color: #e4b;
        }
        .hex3{
            border-color: #33ffbb;
        }
        .hex4{
            border-color: #3fb;
        }
    </style>
</head>
<body>
    <h1>Example to demonstrate the CSS border color using hexadecimal and 3-digit hexadecimal color values</h1>
    <div>
        <p class="hex1">It specifies border color with hexadecimal value.</p>
        <p class="hex2">It specifies border color with 3-digit hexadecimal value.</p>
        <p class="hex3">It specifies border color with hexadecimal value.</p>
        <p class="hex4">It specifies border color with 3-digit hexadecimal value.</p>
    </div>
</body>
</html>

输出

结论

在本文中，您了解了 CSS 边框颜色，它是一个 CSS 属性，用于定义 HTML 元素边框的颜色。

您已经了解了用于在 CSS 中定义颜色的各种颜色格式，例如标准颜色名称、RGB 颜色值、RGBA 颜色值、十六进制颜色值、3 位十六进制颜色值、HSL 颜色值和 HSLA 颜色值。

您已经看到了几个示例，演示了如何使用不同的颜色格式为 HTML 元素应用边框颜色。

下一主题CSS 按钮悬停效果

CSS Border Color

CSS 边框颜色语法

CSS 颜色格式

标准颜色名称

RGB 值

RGBA（红、绿、蓝、Alpha）值

十六进制 (Hex) 值

3 位十六进制 (Hex) 值

HSL 值

HSLA 值

CSS 各个边的边框颜色

演示 CSS 各个边的边框颜色的示例

CSS 边框颜色简写属性

演示使用简写属性的 CSS 边框颜色的示例

使用 RGB（红、绿、蓝）和 RGBA（红、绿、蓝、Alpha）颜色值应用边框颜色

演示使用 RGB 和 RGBA 颜色值的 CSS 边框颜色的示例

使用 HSL（色相、饱和度、亮度）和 HSLA（色相、饱和度、亮度、Alpha）颜色值应用边框颜色

演示使用 HSL 和 HSLA 颜色值的 CSS 边框颜色的示例

使用十六进制 (Hex) 和 3 位十六进制 (Hex) 颜色值应用边框颜色

演示使用十六进制 (Hex) 和 3 位十六进制 (Hex) 颜色值的 CSS 边框颜色的示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Border Color

CSS 边框颜色语法

CSS 颜色格式

标准颜色名称

RGB 值

RGBA（红、绿、蓝、Alpha）值

十六进制 (Hex) 值

3 位十六进制 (Hex) 值

HSL 值

HSLA 值

CSS 各个边的边框颜色

演示 CSS 各个边的边框颜色的示例

CSS 边框颜色简写属性

演示使用简写属性的 CSS 边框颜色的示例

使用 RGB（红、绿、蓝）和 RGBA（红、绿、蓝、Alpha）颜色值应用边框颜色

演示使用 RGB 和 RGBA 颜色值的 CSS 边框颜色的示例

使用 HSL（色相、饱和度、亮度）和 HSLA（色相、饱和度、亮度、Alpha）颜色值应用边框颜色

演示使用 HSL 和 HSLA 颜色值的 CSS 边框颜色的示例

使用十六进制 (Hex) 和 3 位十六进制 (Hex) 颜色值应用边框颜色

演示使用十六进制 (Hex) 和 3 位十六进制 (Hex) 颜色值的 CSS 边框颜色的示例

结论

相关帖子

CSS content property

CSS 按钮

CSS font-weight

CSS Text Effects

DropDown Menus in CSS

page-break-after 属性

CSS Background-color

CSS transition-delay

CSS Link

background-attachment

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器