Tidadigi Logo

CSS border-top-color Property

Thuộc tính border-color được dùng để tô màu tất cả các đường viền của vùng chứa.

Thuộc tính border-top-color cung cấp tùy chọn tô màu khác với border-color cho viền trên.

Lưu ý: Hãy cẩn thận về thứ tự khi viết câu lệnh trong CSS. CSS sẽ lấy giá trị cuối cùng.

Lưu ý: Để có kết quả như mong đợi hãy viết border-top-color sau border-color.

Cú pháp: 

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

Giá trị mặc định: Màu hiện tại của phần tử

Giá trị thuộc tính:

  • color: Đặt màu cho đường viền trên của phần tử.
  • Transparent: Chỉ định giá trị trong suốt cho đường viền trên.
  • initial: Đặt thuộc tính về giá trị mặc định của nó.

Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính border-top-color: color.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | border-top-color Property
    </title>
    <style>
        h1 {
            color: green;
        }

        h3 {
            border: 2px solid green;
            border-top-color: red;
            width: 50%;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2>border-top-color:color;</h2>
        <h3>GeeksForGeeks</h3>

        <!-- Sets the color-->
        <p style="border-style:dotted; 
                border-top-color:coral; 
                width:70%;">
            It is a computer science portal for geeks.</p>

    </center>
</body>
</html>

Đầu ra: 

css-border-top-color-property

Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính border-top-color: transparent;.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | border-top-color Property
    </title>
    <style>
        h1 {
            color: green;
        }

        h3 {
            border: 2px solid green;
            border-top-color: transparent;
            width: 50%;
        }
    </style>
</head>

<body>
    <center>

        <h1>GeeksForGeeks</h1>
        <h2>border-top-color:transparent</h2>
        <h3>GeeksForGeeks</h3>

        <!-- Sets the color to transparent-->
        <p style="border-style:dotted; 
                border-top-color:transparent; 
                width:70%;">
            It is a computer science portal for geeks.</p>
    </center>
</body>
</html>

Đầu ra: 

css-border-top-color-property

Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính border-top-color: initial;.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | border-top-color Property
    </title>
    <style>
        h1 {
            color: green;
        }

        h3 {
            border: 2px solid green;
            border-top-color: initial;
            width: 50%;
        }
    </style>
</head>

<body>
    <center>

        <h1>GeeksForGeeks</h1>
        <h2>border-top-color:initial;</h2>
        <h3>GeeksForGeeks</h3>

        <!-- Sets the color to its default value-->
        <p style="border-style:dotted; 
                border-top-color:initial; 
                width:70%;">
            It is a computer science portal for geeks.</p>
    </center>
</body>
</html>

Đầu ra: 

css-border-top-color-property

Trình duyệt được hỗ trợ: Dưới đây là danh sách các trình duyệt hỗ trợ thuộc tính css border-top-color:

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Apple Safari 1.0

Last Updated : 21/07/2025