Tidadigi Logo

CSS outline-color Property

Thuộc tính outline-color trong CSS dùng để đặt màu cho đường viền của một phần tử.

Cú pháp

outline-color: <color> | invert | inherit;

Giá trị thuộc tính

<color>: Thuộc tính này đặt màu đường viền thành bất kỳ màu CSS hợp lệ nào.

Ví dụ: outline-color: black;

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS outline-color property</title>

    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            color: green;
            text-align: center;
            outline-width: 5px;
            outline-style: dashed;
            /* CSS property for outline-color */
            outline-color: black;
        }
    </style>

</head>

<body>
    <!-- outline-color: black;-->
    <h1>GeeksForGeeks</h1>
</body>

</html>
Output:Example: outline-color: #FF00FF;  html
<!DOCTYPE html>
<html>

<head>
    <title>CSS outline-color property</title>

    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            color: green;
            text-align: center;
            outline-width: 5px;
            outline-style: dashed;
            /* CSS property for outline-color */
            outline-color: #FF00FF;
        }
    </style>

</head>

<body>
    <!-- outline-color: #FF00FF;-->
    <h1>GeeksForGeeks</h1>
</body>

</html>

    Output:Example: outline-color: rgb(0, 0, 255);  html
    
        
<!DOCTYPE html>
<html>

<head>
    <title>CSS outline-color property</title>

    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            color: green;
            text-align: center;
            outline-width: 5px;
            outline-style: dashed;
            /* CSS property for outline-color */
            outline-color: rgb(0, 0, 255);
        }
    </style>

</head>

<body>
    <!-- outline-color: rgb(0, 0, 255);-->
    <h1>GeeksForGeeks</h1>
</body>

</html>

Output:

css-outline-color-property

Ví dụ: outline-color: hsl(0, 100%, 50%);

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS outline-color property</title>

    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            color: green;
            text-align: center;
            outline-width: 5px;
            outline-style: dashed;
            /* CSS property for outline-color */
            outline-color: hsl(0, 100%, 50%);
        }
    </style>

</head>

<body>
    <!-- outline-color: hsl(0, 100%, 50%);-->
    <h1>GeeksForGeeks</h1>
</body>

</html>

Output:

css-outline-color-property

invert: Thuộc tính này đặt màu viền thành màu nghịch đảo với màu nền. Màu này đảm bảo đường viền luôn hiển thị rõ ràng.

Lưu ý: Không phải tất cả trình duyệt đều hỗ trợ thuộc tính này.

Ví dụ: outline-color: invert;

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS outline-color property</title>

    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            border: 5px solid yellow;
            text-align: center;
            outline-width: 5px;
            outline-style: solid;
            /* CSS property for outline-color */
            outline-color: invert;
        }
    </style>

</head>

<body>
    <!-- outline-color: invert;-->
    <h1>GeeksForGeeks</h1>
</body>

</html>


Inherit: Thuộc tính này đặt màu đường viền theo thuộc tính outline-color được kế thừa từ phần tử cha.

Ví dụ: outline-color: inherit;

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS outline-color property</title>

    <!-- Internal CSS Style Sheet -->
    <style>
        body {
            outline-color: red;
        }
        
        h1 {
            text-align: center;
            outline-width: 5px;
            outline-style: solid;
            /* CSS property for outline-color */
            outline-color: inherit;
        }
    </style>

</head>

<body>
    <!-- outline-color: inherit;-->
    <h1>GeeksForGeeks</h1>
</body>

</html>

Output:

css-outline-color-property

Các trình duyệt được hỗ trợ: Thuộc tính outline-color của CSS được hỗ trợ bởi các trình duyệt sau:

  • Chrome 1
  • Edge 12
  • Firefox 1.5
  • Opera 7
  • Safari 1.2

Last Updated : 21/07/2025