Thuộc tính outline-color trong CSS

Thuộc tính outline-color được dùng để vẽ một đường viền với màu cụ thể quanh đường viền của phần tử, nhưng outline không phải là một phần của kích thước phần tử (khác với border property).

Cú pháp

Selector {
  outline-color: /*value*/
}

LƯU Ý: Thuộc tính outline-style cần được định nghĩa trước khi khai báo outline-color.

Ví dụ 1: Outline trên span và div tròn

<!DOCTYPE html>
<html>
<head>
<title>CSS outline-color</title>
<style>
  span {
    margin: 15px; padding: 20px; border-style: solid;
    border-color: #f28500 #dc3545; position: absolute;
    outline-width: 5px; outline-style: double; outline-color: green;
    border-radius: 50%;
  }
  #showDiv {
    margin: auto; border-style: solid;
    border-color: darkmagenta dodgerblue;
    outline-style: groove; outline-color: black;
    height: 80px; width: 80px;
  }
  #container { width: 50%; margin: 50px auto; }
</style>
</head>
<body>
  <div id="container">
    <div id="showDiv"><span></span></div>
  </div></body></html>

Kết quả

Ví dụ 2: Outline dashed trên paragraph

<!DOCTYPE html>
<html>
<head>
<title>CSS outline-color</title>
<style>
  #container { width: 50%; margin: 50px auto; }
  p {
    margin: auto; border-style: ridge; border-width: 10px; border-color: lightblue;
    outline-style: dashed; outline-width: 5px; outline-color: violet;
  }
</style>
</head>
<body>
  <div id="container">
    <p>Reach millions of professionals with video tutorials.</p>
  </div>
</body>
</html>

Kết quả

Các giá trị outline-color:

• color name - tên màu (red, blue, green)
• hex - mã hex (#ff0000, #00ff00)
• rgb/rgba - rgb(255,0,0), rgba(255,0,0,0.5)
• hsl/hsla - hsl(0,100%,50%)
• invert - đảo ngược màu (đảm bảo tương phản) - hỗ trợ hạn chế

Shorthand: outline: 5px double green; (width style color)