คุณสมบัติ border-style
เพื่อกำหนดสไตล์ของขอบ ให้ใช้คุณสมบัติ border-style คุณสมบัติ border-style ให้คุณเลือกสไตล์ขอบได้ดังนี้:
- none: ไม่มีขอบ
- solid: ขอบเป็นเส้นทึบเดียว
- dotted: ขอบเป็นจุดๆ
- dashed: ขอบเป็นขีดขึงสั้นๆ
- double: ขอบเป็นสองเส้นทึบ
- groove: ขอบดูเหมือนถูกแกะสลักเข้าไปในหน้า
- ridge: ขอบดูเหมือนยtrice (ตรงข้าม groove)
- inset: ขอบทำให้กล่องดูเหมือนฝังอยู่ในหน้า
- outset: ขอบทำให้กล่องดูเหมือนลอยออกมาจากผืนผ้าใบ
- hidden: เหมือน none แต่ต่างกันในการ resolve border conflict ของตาราง
ตัวอย่าง
ลองรันโค้ดต่อไปนี้เพื่อกำหนดสไตล์ของขอบ:
<html>
<head>
</head>
<body>
<p style="border-width:4px; border-style:none;">
This is a border with none width. </p>
<p style="border-width:4px; border-style:solid;">
This is a solid border. </p>
<p style="border-width:4px; border-style:dashed;">
This is a dashed border. </p>
<p style="border-width:4px; border-style:double;">
This is a double border. </p>
<p style="border-width:4px; border-style:groove;">
This is a groove border. </p>
</body>
</html>
