Tidadigi Logo

CSS outline-style Property

Thuộc tính outline-style trong CSS dùng để thiết lập giao diện đường viền của một phần tử. Đường viền và border của một phần tử có nét tương đồng, nhưng không giống nhau. Đường viền không chiếm không gian và nó được vẽ bên ngoài border của một phần tử. Ngoài ra, đường viền được vẽ xung quanh cả bốn cạnh của phần tử theo mặc định và không có cách nào thay đổi điều này.

Cú pháp:

outline-style: auto|none|dotted|dashed|solid|double|groove|ridge|
inset|outset|initial|inherit;

Giá trị thuộc tính:

  • auto: Thuộc tính này thiết lập đường viền của một phần tử thông qua trình duyệt.

Cú pháp:

outline-style: auto;

Ví dụ:

html 
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
    
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                
                /* CSS Property for outline-style */ 
                outline-style: auto;
            }
        </style>
    
    </head>
    
    <body>
        <!-- outline-style: auto;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>

Đầu ra:

css-outline-style-property

  • none: Đây là giá trị mặc định và nó đặt độ rộng đường viền thành 0. Do đó, nó không hiển thị.

Cú pháp:

outline-style: none;

Ví dụ:

html 
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
    
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                
                /* CSS Property for outline-style */ 
                outline-style: none;
            }
        </style>
    
    </head>
    
    <body>
        
        <!-- outline-style: none;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>

Đầu ra:

css-outline-style-property

  • dotted: Nó được sử dụng để đặt một loạt các dấu chấm xung quanh phần tử làm đường viền.

Cú pháp:

outline-style: dotted;

Ví dụ:

html 
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
    
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                
                /* CSS Property for outline-style */ 
                outline-style: dotted;
            }
        </style>
    
    </head>
    
    <body>
        
        <!-- outline-style: dotted;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>

Đầu ra:

css-outline-style-property

  • dashed: Nó được sử dụng để thiết lập một loạt các đoạn đường nét đứt xung quanh phần tử làm đường viền.

Cú pháp:

outline-style: dashed;

Ví dụ:

html 
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
    
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                
                /* CSS Property for outline-style */ 
                outline-style: dashed;
            }
        </style>
    
    </head>
    
    <body>
        
        <!-- outline-style: dashed;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>

Đầu ra:

css-outline-style-property

  • solid: Nó được sử dụng để thiết lập đoạn đường nét liền xung quanh phần tử làm đường viền.

Cú pháp:

outline-style: solid;

Ví dụ:

html 
<!DOCTYPE html>
<html>
  <head>
    <title>CSS outline-style property</title>

    <!-- Internal CSS Style Sheet -->
    <style>
      h1{
        color: green;
        text-align: center;
        
        /* CSS Property for outline-style */ 
        outline-style: solid;
      }
    </style>

  </head>

  <body>
      <!-- outline-style: solid;-->
      <h1>GeeksForGeeks</h1>
  </body>

</html>

Đầu ra:

css-outline-style-property

  • double: Nó thiết lập các đoạn đường nét đôi xung quanh phần tử làm đường viền. Độ rộng đường viền bằng tổng độ rộng các đoạn đường nét riêng lẻ và khoảng trống giữa chúng.

Cú pháp:

outline-style: double;

Ví dụ:

html 
<!DOCTYPE html>
<html>
  <head>
    <title>CSS outline-style property</title>

    <!-- Internal CSS Style Sheet -->
    <style>
      h1{
        color: green;
        text-align: center;
        
        /* CSS Property for outline-style */ 
        outline-style: double;
      }
    </style>

  </head>

  <body>
      <!-- outline-style: double;-->
      <h1>GeeksForGeeks</h1>
  </body>

</html>

Đầu ra:

css-outline-style-property

  • groove: Nó đặt các đoạn đường rãnh xung quanh phần tử làm đường viền tạo cảm giác như được khắc.

Cú pháp:

outline-style: groove;

Ví dụ:

html 
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
    
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                outline-width: 8px;
                
                /* CSS Property for outline-style */ 
                outline-style: groove;
            }
        </style>
    
    </head>
    
    <body>
        
        <!-- outline-style: groove;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>

Đầu ra:

css-outline-style-property

  • ridge: Nó đặt các đoạn đường gờ xung quanh phần tử làm đường viền tạo cảm giác nổi lên. Nó ngược lại với groove.

Cú pháp:

outline-style: ridge;

Ví dụ:

html 
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                outline-width: 8px;
                
                /* CSS Property for outline-style */ 
                outline-style: ridge;
            }
        </style>
    </head>
    
    <body>
        
        <!-- outline-style: ridge;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>

Đầu ra:

css-outline-style-property

  • inset: Nó đặt các đoạn đường chìm xung quanh phần tử làm đường viền, tạo cảm giác như nó được cố định trên màn hình.

Cú pháp:

outline-style: inset;

Ví dụ:

html 
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
    
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                outline-width: 8px;
                
                /* CSS Property for outline-style */ 
                outline-style: inset;
            }
        </style>
    </head>
    
    <body>
        
        <!-- outline-style: inset;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>

Đầu ra:

css-outline-style-property

  • outset: Nó đặt các đoạn đường xung quanh phần tử có vẻ nhô ra ngoài, làm đường viền. Nó ngược lại với inset.

Cú pháp:

outline-style: outset;

Ví dụ:

html 
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
    
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                outline-width: 8px;
                
                /* CSS Property for outline-style */ 
                outline-style: outset;
            }
        </style>
    </head>
    
    <body>
        
        <!-- outline-style: outset;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>

Đầu ra:

css-outline-style-property

  • initial: Nó được sử dụng để đặt thuộc tính outline-style về giá trị mặc định của nó. Nó đặt độ rộng của đường viền thành 0. Do đó, đường viền không hiển thị.

Cú pháp:

outline-style: initial;

Ví dụ:

html 
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
    
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                outline-width: 5px;
                outline-color: black;
        
                /* CSS Property for outline-style */
                outline-style: initial;
            }
        </style>
    </head>
    
    <body>
        
        <!-- outline-style: initial;-->
        <h1>GeeksForGeeks</h1>
    </body>

</html>

Đầu ra:

css-outline-style-property

  • inherit: Nó làm cho thuộc tính outline-style được kế thừa từ phần tử cha của nó.

Cú pháp:

outline-style: inherit;

Ví dụ:

html 
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
    
        <!-- Internal CSS Style Sheet -->
        <style>
            * {
                padding: 1px;
            }
            body {
                outline-style: dashed;
            }
            h1 {
                color: green;
                text-align: center;
                outline-width: 5px;
                outline-color: black;
        
                /* CSS Property for outline-style */
                outline-style: inherit;
            }
        </style>
    </head>
    
    <body>
        
        <!-- outline-style: inherit;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>

Đầu ra:

css-outline-style-property

Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi thuộc tính outline-style được liệt kê dưới đây:

  • Google Chrome 1.0
  • Edge 12
  • Internet Explorer 8
  • Firefox 1.5
  • Opera 7.0
  • Safari 1.2

Last Updated : 21/07/2025