Outline (Viền ngoài) không chiếm diện tích và được hiển thị quanh border nếu có. Nó dùng để highlight phần tử và chúng ta không thể chỉ định các cạnh riêng lẻ có outline hay không. Giống border, outline không hiển thị mặc định. Trong một số trình duyệt (Firefox), các phần tử focus được hiển thị với outline mỏng.
Border (Viền) có thể tùy chỉnh mức độ lớn hơn. Chúng ta style từng cạnh của border và bo tròn góc của chúng. Border chiếm diện tích và ảnh hưởng đến box-sizing.
So sánh chi tiết
| Đặc điểm | Border | Outline |
|---|---|---|
| Chiếm diện tích (layout) | Có | Không |
| Ảnh hưởng box-sizing | Có | Không |
| Bo góc (border-radius) | Có | Không (thường vuông) |
| Tùy chỉnh từng cạnh | Có (border-top, right, bottom, left) | Không (chỉ all sides) |
| Dùng cho focus state | Không khuyến khích | Chuẩn accessibility |
| Z-index stacking | Bình thường | Vẽ trên border, không tạo stacking context |
| Animation performance | Trigger layout | Chỉ paint (tốt hơn) |
Cú pháp
selector {
border: /* width style color */;
outline: /* width style color */;
}
Ví dụ 1: Outline vs Border trên paragraph
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: flex; float: left;
margin: 20px; padding: 12px;
width: 30%;
outline: thin dotted;
background-color: lavender;
}
p + p {
width: 250px;
outline: none;
border: outset;
}
</style>
</head>
<body>
<h2>Learning is fun</h2>
<p>Java là ngôn ngữ lập trình cấp cao do Sun Microsystems phát hành năm 1995.</p>
<p>Java chạy trên nhiều nền tảng: Windows, Mac OS, UNIX. Java là BẮT BUỘC cho sinh viên và chuyên gia...</p>
</body>
</html>
Ví dụ 2: Outline thick double trên article
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: auto; width: 70%;
outline: thick double;
background-color: lightgoldenrodyellow;
padding: 20px;
}
h3 { border: inset; }
</style>
</head>
<body>
<h3>Kotlin Tutorial</h3>
<article>
Kotlin là ngôn ngữ lập trình do JetBrains giới thiệu, nhà thiết kế của IntelliJ IDEA.
Đây là ngôn ngữ tĩnh mạnh chạy trên JVM. Năm 2017, Google công bố Kotlin là ngôn ngữ chính thức cho Android.
</article>
</body>
</html>
Khi nào dùng cái nào?
- Border: Layout, visual separation, decorative, container boundary
- Outline: Focus state (
:focus-visible), highlight error, debug layout, ring effect - Box-shadow: Thay thế outline cho rounded corners, multiple outlines, complex effects
Focus Style Accessibility
/ * Tốt cho accessibility */
:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
/ * Custom focus ring thay outline */
.button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.4);
}