CSS Borders: คู่มือสร้างขอบ (Border) แบบขั้นตอน

คุณสมบัติ CSS border ใช้กำหนดขอบขององค์ประกอบ HTML คุณสมบัติย่อคือ border-width, border-color, และ border-style

การเพิ่มขอบรอบองค์ประกอบบนหน้าเว็บเป็นฟีเจอร์สำคัญของเว็บดีไซน์ ขอบช่วยแยกเนื้อหา ทำให้ผู้คนอ่านข้อมูลง่ายขึ้น

คุณสมบัติ border ใน CSS เป็น shorthand ของ 3 sub-properties ที่กำหนด style, color, และ width ของขอบ

บทเรียนนี้อธิบายการใช้ border property และ sub-properties เพื่อออกแบบขอบ HTML จนจบคุณจะออกแบบขอบ CSS ได้ครบทุกด้าน

บทนำ: Border ใน CSS

คุณสมบัติ border ระบุขอบรอบองค์ประกอบเว็บ เช่น รูปภาพ กล่อง หรือฟอร์ม

Border property เป็น shorthand ของ 3 sub-properties:

• border-width — ความหนาของขอบ
• border-color — สีของขอบ
• border-style — รูปแบบของขอบ

สามารถใช้ border property แบบเดี่ยว หรือใช้ sub-properties แยกกัน บทความนี้ครอบคลุมทั้ง 2 วิธี

CSS Border Sub-properties (คุณสมบัติย่อย)

1. border-style Property

border-style กำหนดประเภทขอบที่จะแสดง: solid, dotted, dashed เป็นต้น มี 10 ค่าที่เป็นไปได้:

.box { border-style: solid; }
.box { border-style: dotted; }
.box { border-style: dashed; }
.box { border-style: double; }
.box { border-style: ridge; }
.box { border-style: groove; }
.box { border-style: inset; }
.box { border-style: outset; }
.box { border-style: none; }
.box { border-style: hidden; }

2. border-width Property

border-width กำหนดความหนาขอบ ใช้ค่าความยาว CSS (pt, px, em) หรือค่า keyword: thin, medium, thick

ตัวอย่าง: ขอบ solid หนา 5px

<style>
  .box { border-style: solid; border-width: 5px; }
</style>
<html>
  <p class="box">5px thick solid border</p>
</html>

3. border-color Property

border-color กำหนดสีขอบ รับค่าสีได้หลายรูปแบบ:

• name — ชื่อสี เช่น blue
• HEX — ค่า hex เช่น #000
• HSL — ค่า HSL เช่น hsl(10, 100%, 25%)
• RGB — ค่า RGB เช่น rgb(102, 222, 95)
• transparent

ตัวอย่าง: ขอบ dotted สีน้ำเงิน หนา 5px

<style>
  .box { border-style: dotted; border-width: 5px; border-color: blue; }
</style>
<html>
  <p class="box">5px thick blue dotted border</p>
</html>

Sub-property Multiple Values (หลายค่าใน sub-property เดียว)

แต่ละ sub-property รับหลายค่าได้ เพื่อกำหนดขอบแต่ละด้านต่างกัน:

• 1 ค่า — ใช้กับทุกด้าน
• 2 ค่า — บน/ล่าง, ซ้าย/ขวา
• 3 ค่า — บน, ขวา/ซ้าย, ล่าง
• 4 ค่า — บน, ขวา, ล่าง, ซ้าย (ตามเข็มนาฬิกา)

ตัวอย่าง: ขอบบน-ล่าง solid, ซ้าย-ขวา dashed

<style>
  .box { border-style: solid dashed; }
</style>
<html>
  <p class="box">solid top and dashed sides border</p>
</html>

CSS Border Shorthand

รวม 3 sub-properties ใน property เดียว โครงสร้าง:

• border-width (optional)
• border-style (required)
• border-color (optional)

ตัวอย่าง: ขอบสีชมพู solid หนา 5px

<style>
  .box { border: 5px solid pink; }
</style>
<html>
  <p class="box">5px solid pink border</p>
</html>

CSS Individual Borders (ขอบแต่ละด้านแยกกัน)

สามารถกำหนดขอบเฉพาะด้านใดด้านหนึ่งได้ด้วย properties:

• border-left-[property]
• border-right-[property]
• border-top-[property]
• border-bottom-[property]

property สามารถเป็น: style, color, width, หรือเว้นว่าง (ใช้ shorthand)

ตัวอย่าง: ขอบซ้าย solid 2px, ขอบบน dotted 5px

<style>
  .box { border-left: 2px solid; border-top: 5px dotted; }
</style>
<html>
  <p class="box">mixed border</p>
</html>

ด้านซ้าย: 2px solid, ด้านบน: 5px dotted ใช้ individual properties กำหนดขอบแต่ละด้านแยกกัน

สรุป

คุณสมบัติ border สร้างขอบใน CSS มี 3 sub-properties — style, color, width — ปรับแต่งแต่ละส่วนแยกกัน บทเรียนนี้ครอบคลุม border property, sub-properties ทั้ง 3 และการจัดสไตล์แต่ละด้านด้วย individual border properties

หากต้องการเรียนรู้เพิ่มเติม: border images, border collapse, outlines, border radius (มุมโค้ง), box shadow effect