Tidadigi Logo

CSS Outline

CSS outline là một thuộc tính được dùng để vẽ một đường quanh border của phần tử. Không như border thuộc tính này không ảnh hưởng đến bố cục. Nó thường được dùng để làm nổi bật phần tử bằng cách tạo điểm nhấn mà không làm thay đổi kích thước.

Syntax

selector{
    outline: outline-width outline-type outline-color;
    /*outline: 2px solid grey;*/
}

Example: Ví dụ này sử dụng thuộc tính outline để tạo một đường viền màu xanh dương nét đứt.

HTML 
<!DOCTYPE html>
<html>

<head>
    <style>
        .dotted {
            outline: 2px dashed blue;
            color: green;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Outline Property</h3>
    <p class="dotted">
        A Computer Science portal for geeks.
    </p>
</body>

</html>

Output:

css-outline
CSS Outline Example output

Các thuộc tính CSS outline có thể được chia thành 4 loại. Đó là: Outline-style, Outline-color, Outline-width và Outline-offset. Chúng ta sẽ thảo luận các loại thuộc tính outline này một cách tuần tự qua các ví dụ.

CSS Outline Properties

Có rất nhiều thuộc tính nằm trong nhóm CSS outline, tất cả đều được mô tả kỹ với ví dụ.

Outline-style

Thuộc tính outline-style property thiết lập hình thức của outline của một phần tử. Bất kỳ thuộc tính outline nào khác không thể truy cập được nếu không có outline-style. Nếu không có thuộc tính này style mặc định sẽ được set thành none.

Syntax

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

Outline-color

Thuộc tính outline-color property thiết lập màu của outline của một phần tử. Màu sắc có thể được thiết lập bằng tên, giá trị RGB hoặc giá trị hex. Nếu không có thuộc tính này màu mặc định sẽ là màu hiện tại của phần tử.

Syntax

outline-color: <color> | invert | inherit;

Example: Ví dụ này minh họa Outline property trong đó màu được đặt thành một giá trị màu cụ thể và outline style là solid.

HTML 
<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            border: solid orange 4px;
            outline-style: solid;
            outline-color: green;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Outline Property</h3>
    <p>A Computer Science portal for geeks.</p>

</body>

</html>

Output:

css-outline

Outline-width

Outline-width được dùng để chỉ định độ rộng của outline cho một phần tử cụ thể. Độ rộng của outline có thể được đặt bằng cách chỉ định kích thước theo px, cm, pt, v.v. Hoặc sử dụng các thuật ngữ như thin, thick, medium. Nếu không có thuộc tính này thì độ rộng mặc định sẽ là medium.

Syntax:

outline-width: medium|thin|thick|length|initial|inherit;

Outline-offset

Outline-offset Property thiết lập khoảng cách giữa outline và cạnh hoặc border của một phần tử. Outline là một đường được vẽ xung quanh các phần tử bên ngoài border. Khoảng cách giữa phần tử và outline của nó là trong suốt, outline có thể không phải hình chữ nhật. Giá trị mặc định là 0.

Syntax:

outline-offset: length|initial|inherit;

Example: Ví dụ này minh họa Outline property trong đó offset được đặt thành 3px và width được đặt là 5px.

HTML 
<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            border: solid green 3px;
            outline-style: solid;
            outline-width: 5px;
            outline-offset: 3px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Outline Property</h3>
    <p>A Computer Science portal for geeks.</p>
</body>

</html>

Output:

css-outline
CSS Outline offset and width example


Supported Browsers

Các trình duyệt được hỗ trợ bởi CSS Grid Layout Module được liệt kê dưới đây.


Last Updated : 21/07/2025