CSS ระบุ border-style

คำนิยามและวิธีใช้

border-style มีความหมายในการตั้งรูปแบบสไตล์ของขอบเขตทั้งหมดขององค์ประกอบ หรือเพื่อตั้งรูปแบบสไตล์ขอบเขตแต่ละตัวเดี่ยวๆ

เฉพาะเมื่อค่านี้ไม่ใช่ none ขอบเขตจึงอาจปรากฏขึ้น

ตัวอย่าง 1

border-style:dotted solid double dashed;
  • ขอบบนเป็นจุดตัวเล็ก
  • ขอบขวาเป็นสีแข็ง
  • ขอบล่างเป็นสีเส้นแบบทรงหลาย
  • ขอบซ้ายเป็นสีเส้นแบบซับซ้อน

ตัวอย่าง 2

border-style:dotted solid double;
  • ขอบบนเป็นจุดตัวเล็ก
  • ขอบขวาและขอบซ้ายเป็นสีแข็ง
  • ขอบล่างเป็นสีเส้นแบบทรงหลาย

ตัวอย่าง 3

border-style:dotted solid;
  • ขอบบนและขอบล่างเป็นจุดตัวเล็ก
  • ขอบขวาและขอบซ้ายเป็นสีแข็ง

ตัวอย่าง 4

border-style:dotted;
  • ทั้ง 4 ขอบเขตเป็นจุดตัวเล็ก

อ่านเพิ่มเติม:

CSS ตัวแทน:CSS ขอบเขต

คู่มือเอฮ์ทีเอ็มแอลดอม อินเทอร์เน็ตเดโอมัล:borderStyle แอตทริบิวต์

ตัวอย่าง

ตั้งรูปแบบขอบเขตของ 4 ขอบ:

p
  {
  border-style:solid;
  }

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

ระบบสัญลักษณ์ CSS

border-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 ร่อง ซึ่งส่งผลของมันขึ้นอยู่กับค่า border-color
ridge กำหนดรูปแบบขอบเขต3D สัน ซึ่งส่งผลของมันขึ้นอยู่กับค่า border-color
inset กำหนดรูปแบบขอบเขต3D inset ซึ่งส่งผลของมันขึ้นอยู่กับค่า border-color
outset กำหนดรูปแบบขอบเขต3D outset ซึ่งส่งผลของมันขึ้นอยู่กับค่า border-color
inherit กำหนดให้มีการสืบทอดรูปแบบขอบเขตจากองค์ประกอบพ่อ

คำอธิบาย

รูปแบบขอบเขตที่ทำให้ยากที่จะคาดการณ์ที่สุดคือ double มันถูกนิยามว่าเป็นความกว้างของสองสายของเส้นแบบพร้อมกับช่องว่างระหว่างสองสายที่เท่ากับค่า border-width อย่างไรก็ตาม มาตราฐาน CSS ไม่ได้กล่าวว่าหนึ่งสายเป็นกว้างกว่าสายอื่นหรือสองสายควรมีความกว้างเท่ากัน และไม่ได้กล่าวว่าช่องว่างระหว่างสองสายควรกว้างกว่าเส้นแบบพร้อมกัน ทุกอย่างนี้จะถูกตัดสินโดยตัวแทนผู้ใช้งาน ผู้สร้างงานไม่มีอิทธิพลต่อการตัดสินนี้。

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

ค่าเริ่มต้น: not specified
มีความเป็นสืบทอด: no
เวอร์ชั่น: CSS1
JavaScript ระบบสัญลักษณ์: object.style.borderStyle="dotted double"

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

ตั้งรูปแบบขอบเขตทั้งสี่ขอบ
ตัวอย่างนี้แสดงว่าจะเรียบร้อยในการตั้งรูปแบบขอบเขตทั้งสี่ขอบ。
ตั้งรูปแบบขอบเขตของแต่ละขอบ
ตัวอย่างนี้แสดงว่าจะเรียบร้อยในการตั้งรูปแบบของขอบเขตขององค์ประกอบที่มีขอบเขตต่างกันในทุกขอบขององค์ประกอบ。

การสนับสนุนเบราเซอร์

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

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