คุณสมบัติ border-width กำหนดความกว้างของเส้นขอบ element สามารถกำหนดแต่ละด้านแยกได้ด้วย border-top-width, border-right-width, border-bottom-width, border-left-width
Syntax
Selector { border-width: <value> }
ตัวอย่างที่ 1: ความกว้างต่างๆ และมุมโค้ง
<!DOCTYPE html> <html> <head> <style> #main { border-bottom-width: 20px; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; } div { margin: auto; height: 100px; width: 80px; border-style: double; border-width: 5px; } div > div { margin-top: 15px; height: 50px; width: 50px; border-style: dashed; border-color: red; border-width: thin; text-align: center; line-height: 50px; } </style> </head> <body> <div id="main"> <div>demo</div> </div> </body> </html>
ตัวอย่างที่ 2: เส้นขอบ ridge และ thin
<!DOCTYPE html> <html> <head> <style> p { padding: 2%; border-style: ridge; border-width: 4px; border-color: indianred; } q { border-style: solid; border-width: thin; text-align: center; font-style: italic; } </style> </head> <body> <p> Student details are covered here. </p> <hr> <q>Education is the most powerful weapon which you can use to change the world.</q> </body> </html>
คำอธิบาย
ตัวอย่างที่ 1: #main มี border-bottom-width 20px กว้างมาก พร้อมมุมโค้งล่าง div ภายนอกมี double border 5px div ภายในมี dashed border thin (บาง)
ตัวอย่างที่ 2: p มี ridge border 4px สี indianred q มี solid border thin (บางมาก)
ค่าความกว้างที่ใช้ได้:
| ค่า | คำอธิบาย | ประมาณ px |
|---|---|---|
thin | บางที่สุด | ~1px |
medium | ปานกลาง (ค่าเริ่มต้น) | ~3px |
thick | หนา | ~5px |
<length> | ระบุขนาดเอง (px, em, rem) | ตามที่กำหนด |
รูปแบบ shorthand (1-4 ค่า):
- 1 ค่า:
border-width: 5px- ทุกด้าน - 2 ค่า:
border-width: 5px 10px- top/bottom, left/right - 3 ค่า:
border-width: 5px 10px 15px- top, left/right, bottom - 4 ค่า:
border-width: 5px 10px 15px 20px- top, right, bottom, left (ตามเข็มนาฬิกา)
