CSS ความกว้างลูกบอก

การใช้งานและการเขียน

รายละเอียดย่อ border-width กำหนดความกว้างของเส้นขอบทุกฝั่งขององค์ประกอบ หรือเพื่อเส้นขอบทุกฝั่งต่างๆ

มีผลเมื่อรูปแบบเส้นขอบไม่ใช่ none โดยที่ถ้ารูปแบบเส้นขอบเป็น none ความกว้างของเส้นขอบจะถูกปลดฟื้นเป็น 0 ไม่อนุญาตให้กำหนดค่ายาวเป็นลบ

ตัวอย่าง 1

border-width:thin medium thick 10px;
  • เส้นขอบด้านบนเป็นเส้นขอบบาง
  • เส้นขอบด้านขวาเป็นเส้นขอบปานกลาง
  • เส้นขอบด้านล่างเป็นเส้นขอบหนา
  • เส้นขอบด้านซ้ายเป็นเส้นขอบกว้าง 10px

ตัวอย่าง 2

border-width:thin medium thick;
  • เส้นขอบด้านบนเป็น 10px
  • เส้นขอบด้านขวาและด้านซ้ายเป็นเส้นขอบปานกลาง
  • เส้นขอบด้านล่างเป็นเส้นขอบหนา

ตัวอย่าง 3

border-width:thin medium;
  • เส้นขอบด้านบนและด้านล่างเป็นเส้นขอบบาง
  • เส้นขอบด้านขวาและด้านซ้ายเป็นเส้นขอบปานกลาง

ตัวอย่าง 4

border-width:thin;
  • เส้นขอบทั้ง 4 ฝั่งเป็นเส้นขอบบาง

ตัวอย่าง

กำหนดความกว้างของเส้นขอบทั้ง 4 ฝั่ง

p
  {
  border-style:solid;
  border-width:15px;
  }

ลองด้วยตัวเอง

การใช้งาน CSS

border-width: medium|thin|thick|length|initial|inherit;

ค่าทางตัวเลข

ค่า คำอธิบาย
กำหนดเส้นขอบที่บาง thin
medium ค่าเริ่มต้น。กำหนดเส้นขอบที่ปานกลาง
thick กำหนดเส้นขอบที่หนา
length อนุญาตให้คุณกำหนดความกว้างของเส้นขอบตนเอง
inherit กำหนดให้เส้นขอบขององค์ประกอบเป็นรูปแบบที่สืบทอดมาจากองค์ประกอบพ่อ

ตัวอย่างเพิ่มเติม

การกำหนดความกว้างของเส้นขอบทุกฝั่งในการประกาศเดียวกัน
ตัวอย่างนี้แสดงว่าเช่นใช้รายละเอียดย่อเพื่อกำหนดความกว้างของเส้นขอบทุกฝั่งในการประกาศเดียวกัน。

รายละเอียดเทคนิค

ค่าเริ่มต้น: medium
การสืบทอด: no
รุ่น: CSS1
การใช้งาน JavaScript object.style.borderWidth="thin thick"

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางระบุรุ่นที่ใช้งานครั้งแรกของบราวเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

ดูเพิ่มเติมที่

ตูดต่อ CSSCSS ขอบเขต

คู่มือ HTML DOM ที่มีความเหมาะสมborderWidth รายละเอียด