คุณสมบัติ CSS border-width ใช้เพื่อระบุความกว้างสำหรับเส้นขอบขององค์ประกอบ นอกจากนี้เรายังสามารถกำหนดความกว้างสำหรับแต่ละด้านโดยใช้คุณสมบัติ border-top-width, border-right-width, border-left-width และ border-right-width
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติความกว้างเส้นขอบ CSS มีดังนี้−
Selector { border-width: /*value*/ }
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติความกว้างของเส้นขอบ CSS -
<!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>
ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!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>
ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -