Thuộc tính outline-style trong CSS

Thuộc tính outline-style được dùng để vẽ một đường viền 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-style: /*value*/
}

Ví dụ 1: Outline double trên span tròn

<!DOCTYPE html>
<html>
<head>
<title>CSS outline-style</title>
<style>
  span {
    margin: 15px; padding: 20px; border-style: solid;
    border-color: #dc3545; position: absolute;
    outline-width: 5px; outline-style: double; outline-color: orange;
    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-style</title>
<style>
  #container { width: 50%; margin: 50px auto; }
  p {
    margin: auto; border-style: ridge; border-width: 10px; border-color: lightblue;
    outline-style: dashed; outline-color: violet;
  }
</style>
</head>
<body>
  <div id="container">
    <p>Video Tutorials helps in understanding the technology with live running examples and practical implementation.</p>
  </div>
</body></html>

Kết quả

Các giá trị của outline-style:

Lưu ý: outline-style là bắt buộc để outline hiển thị. Nếu chỉ đặt outline-color hoặc outline-width mà không có style thì outline sẽ không hiện. Dùng shorthand: outline: 5px dashed violet;