Thuộc tính Outline Shorthand trong CSS

Thuộc tính shorthand outline có thể được định nghĩa để vẽ một đường viền với style cụ thể (bắt buộc), độ dày, và màu sắc 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: /*value*/
}

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

<!DOCTYPE html>
<html>
<head>
<title>CSS outline Shorthand</title>
<style>
  span {
    margin: 15px; padding: 20px; border-style: solid;
    border-color: #f28500 #dc3545; position: absolute;
    outline: 5px double green; border-radius: 50%;
  }
  #showDiv {
    margin: auto; border-style: solid;
    border-color: darkmagenta dodgerblue;
    outline: groove 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 shorthand trên paragraph

<!DOCTYPE html>
<html>
<head>
<title>CSS outline Shorthand</title>
<style>
  #container { width: 50%; margin: 50px auto; }
  p {
    margin: auto; border-style: ridge; border-width: 10px; border-color: orange;
    outline: 5px dashed yellow;
  }
</style>
</head>
<body>
  <div id="container">
    <p>Coding Ground is loved by millions of programmers around the globe.</p>
  </div>
</body>
</html>

Kết quả

Cú pháp outline shorthand:

outline: [outline-width] [outline-style] [outline-color];

Thứ tự không quan trọng nhưng outline-style là BẮT BUỘC. Nếu thiếu style, outline sẽ không hiển thị.

Ví dụ các cách viết:

• outline: 2px solid red;
• outline: dashed blue; (width mặc định medium)
• outline: thick double #333; (thick = 5px)
• outline: 3px ridge; (color mặc định currentColor)

Outline vs Border: