Outline** ไม่ใช้พื้นที่ และแสดงรอบนอกขอบ (border) หากมี ใช้สำหรับไฮไลท์องค์ประกอบ และไม่สามารถระบุด้านแต่ละด้านได้** (ต่างจาก border) เช่นเดียวกับ border outline ไม่แสดงโดยค่าเริ่มต้น ในบางเบราว์เซอร์ เช่น Firefox องค์ประกอบที่โฟกัสจะแสดง outline บาง
Border** ปรับแต่งได้ละเอียดกว่า สามารถจัดสไตล์แต่ละด้านและมนมุมได้ Border ใช้พื้นที่และส่งผลต่อ box-sizing
ไวยากรณ์ (Syntax)
Selector {
border: /*value*/;
outline: /*value*/;
}ตัวอย่างที่ 1: Outline vs Border บนพารากราฟ
<!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 is a high-level programming language originally developed by Sun Microsystems and released in 1995.</p>
<p>Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. Java is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Software Development Domain</p>
</body>
</html>ผลลัพธ์
ตัวอย่างที่ 2: Outline บน Article, Border บน h3
<!DOCTYPE html>
<html>
<head>
<style>
article { margin: auto; width: 70%; outline: thick double; background-color: lightgoldenrodyellow; }
h3 { border: inset; }
</style>
</head>
<body>
<h3>Kotlin Tutorial</h3>
<article>Kotlin is a programming language introduced by JetBrains...</article>
</body>
</html>ผลลัพธ์
ตารางเปรียบเทียบครบถ้วน
| คุณสมบัติ | Border | Outline |
|---|---|---|
| ส่วนของ Box Model | ใช่ (ส่งผลต่อ layout) | ไม่ (วาดทับ layout) |
| ปรับแต่งแต่ละด้าน | ได้ (border-top, right, bottom, left) | ไม่ได้ (ทุกด้านเหมือนกัน) |
| Border Radius | รองรับ | ไม่รองรับ (ยกเว้น Firefox มี outline-radius) |
| ค่าเริ่มต้น | none | none |
| Focus Ring | ไม่ใช่ค่าเริ่มต้น | ค่าเริ่มต้นของ Browser สำหรับ :focus |
| Shorthand | border: width style color | outline: width style color |
เมื่อไหร่ควรใช้อะไร?
- Border: ส่วนประกอบของ UI, กรอบรูป, ปุ่ม, การ์ด - ส่งผลต่อ layout
- Outline: Focus state, Error highlighting, Debug layout, ไฮไลท์ชั่วคราว - ไม่ส่งผล layout
Accessibility Tip
/* อย่าลบ outline โดยไม่ใส่ focus style ใหม่ */
:focus { outline: none; } /* ❌ ไม่ดี */
:focus { outline: 2px solid #0066cc; outline-offset: 2px; } /* ✅ ดี */