CSS outline-width: Độ dày viền ngoài

Thuộc tính outline-width được dùng để vẽ một đường viền với độ dày cụ thể xung quanh border 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 thuộc tính border.

Cú pháp

selector {
    outline-width: /* giá trị */;
}

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

Giá trị của outline-width

• thin — Mỏng (thường 1px)
• medium — Trung bình (thường 3px, mặc định)
• thick — Dày (thường 5px)
• <length> — Giá trị cụ thể (px, em, rem, v.v.)

Ví dụ 1: Outline trên phần tử tròn

<!DOCTYPE html>
<html>
<head>
<title>CSS outline-width</title>
<style>
span {
    margin: 15px;
    padding: 20px;
    border-style: solid;
    border-color: limegreen crimson;
    position: absolute;
    outline-width: 5px;
    outline-style: ridge;
    outline-color: orange;
    border-radius: 50%;
}
#showDiv {
    margin: auto;
    border-style: solid;
    border-color: darkmagenta dodgerblue;
    outline-style: dotted;
    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>

Ví dụ 2: Outline trên đoạn văn

<!DOCTYPE html>
<html>
<head>
<title>CSS outline-width</title>
<style>
#container {
    width: 50%;
    margin: 50px auto;
}
p {
    margin: auto;
    border-style: ridge;
    border-width: 15px;
    border-color: lightblue;
    outline-style: solid;
    outline-color: darkviolet;
    outline-width: 5px;
    padding: 20px;
}
</style>
</head>
<body>
<div id="container">
<p>Learning is fun with examples and live running code.</p>
</div>
</body>
</html>

Shorthand: outline

Có thể gộp cả ba thuộc tính:

selector {
    outline: 2px solid red; /* width | style | color */
}

Outline vs Border