CSS color ảnh hưởng Border và Outline

Chúng ta có thể định nghĩa màu border và màu outline cho một phần tử. Khác với border, outline không chiếm diện tích nào. Thuộc tính border-color dùng để đặt màu border, outline-color dùng để đặt màu outline.

Cú pháp

/* Border color */
selector { border-color: /* value */; }

/* Outline color */
selector { outline-color: /* value */; }

Ví dụ 1: Border-color + Outline-color trên span và div

<!DOCTYPE html>
<html>
<head>
<style>
span {
    margin: 15px; padding: 20px;
    border-style: solid;
    border-color: limegreen crimson; /* top/bottom | left/right */
    position: absolute;
    outline-width: 5px;
    outline-style: ridge;
    outline-color: orange;
    top: 15px; border-radius: 50%;
}
div {
    margin: auto;
    border-style: solid;
    border-color: darkmagenta dodgerblue;
    outline-style: dotted;
    outline-color: black;
    height: 80px; width: 80px;
}
</style>
</head>
<body>
<div><span></span></div>
</body>
</html>

Ví dụ 2: Border ridge + Outline solid

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border-width: 5px;
    border-style: ridge;
    border-color: lightblue;
    outline-style: solid;
    outline-color: darkviolet;
    padding: 20px; margin: 20px auto;
    width: 60%;
}
</style>
</head>
<body>
<h2>Exams Timings</h2>
<p>Entrance Exam timings 3PM - 5PM. All candidates are requested to report at 2:45PM.</p>
</body>
</html>

Border-color chi tiết

/ * 1 giá trị: 4 cạnh */
border-color: red;

/ * 2 giá trị: top/bottom | left/right */
border-color: red blue;

/ * 3 giá trị: top | left/right | bottom */
border-color: red blue green;

/ * 4 giá trị: top | right | bottom | left (theo chiều kim đồng hồ) */
border-color: red blue green yellow;

/ * Từng cạnh riêng lẻ */
border-top-color: red;
border-right-color: blue;
border-bottom-color: green;
border-left-color: yellow;

Outline-color

• Chỉ接受 một giá trị duy nhất (all sides)
• Không có outline-top-color, v.v.
• Mặc định: currentColor (kế thừa từ color)

currentColor keyword

Từ khóa currentColor đại diện cho giá trị color tính toán của phần tử — rất hữu ích để đồng bộ border/outline với text color:

.card {
    color: #0066cc;
    border: 2px solid currentColor;    /* Border xanh dương */
    outline: 2px solid currentColor;   /* Outline xanh dương */
}
.card:hover { color: #004499; } /* Border & outline tự đổi màu */

Lưu ý

• border-color yêu cầu border-style không phải none mới hiển thị
• outline-color yêu cầu outline-style không phải none
• Outline không ảnh hưởng layout — tốt cho debug, focus ring
• box-shadow thường tốt hơn outline cho rounded corners