CSS ระบุรูปแบบของเขตเส้นขอบด้านล่าง
- หน้าก่อน border-bottom-right-radius
- หน้าต่อไป border-bottom-width
คำนิยามและวิธีใช้
border-bottom-style กำหนดรูปแบบของเข็มตั้งข้างล่างขององค์ประกอบ
เข็มตั้งจะแสดงขึ้นได้เมื่อค่านี้ไม่ใช่ none
ใน CSS1 ตัวปลายเบราเซอร์ HTML ต้องสนับสนุน solid และ none
ดูเพิ่มเติม:
ตัวอย่าง CSS:CSS ขอบเขต
คู่มือ CSS:border-bottom ตัวแปร
คู่มือ HTML DOM:ตัวแปร borderBottomStyle
ตัวอย่าง
เปลี่ยนรูปแบบของเข็มตั้งข้างล่าง:
p
{
border-style:solid;
border-bottom-style:dotted;
}
CSS ภาษาเขียน
border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
ค่าทางตัวแปร
| ค่า | คำอธิบาย |
|---|---|
| none | กำหนดเข็มตั้งไม่มีขอบเข็ม |
| hidden | เหมือนกับ "none" แต่ไม่นับถือถึงตาราง สำหรับตาราง ใช้ hidden แทนเพื่อแก้ปัญหาของเข็มตั้ง |
| dotted | กำหนดเข็มตั้งจุด โดยมากแสดงเป็นเส้นเดี่ยวในเบราเซอร์หลายๆตัว |
| dashed | กำหนดเส้นหย่อม โดยมากแสดงเป็นเส้นเดี่ยวในเบราเซอร์หลายๆตัว |
| solid | กำหนดเส้นเดี่ยว |
| double | กำหนดเส้นสองรัศมี ความกว้างของเส้นเท่ากับค่า border-width |
| groove | กำหนดเข็มตั้ง 3D grooves โดยอาศัยค่า border-color |
| ridge | กำหนดเข็มตั้ง 3D โค้งโค้ง โดยอาศัยค่า border-color |
| inset | กำหนดเข็มตั้ง 3D inset โดยอาศัยค่า border-color |
| outset | กำหนดเข็มตั้ง 3D outset โดยอาศัยค่า border-color |
| inherit | กำหนดให้ต้องรับมาจากตัวปลายตามขององค์ประกอบเบราซ์ |
รายละเอียดเทคนิค
| ค่าเริ่มต้น: | not specified |
|---|---|
| นิยามต้นแบบ: | no |
| รุ่น: | CSS1 |
| JavaScript ภาษาเขียน: | object.style.borderBottomStyle="dotted" |
ตัวอย่างเพิ่มเติม
- เปลี่ยนรูปแบบของเข็มตั้งข้างล่าง
- ตัวอย่างแสดงว่าจะเปลี่ยนรูปแบบของเข็มตั้งข้างล่าง
การสนับสนุนโดยเบราเซอร์
ตัวเลขในตารางระบุรุ่นที่เบราเซอร์เรียกเรียงสนับสนุนคุณสมบัตินี้เต็มทั้งหมด。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 5.5 | 1.0 | 1.0 | 9.2 |
- หน้าก่อน border-bottom-right-radius
- หน้าต่อไป border-bottom-width
