CSS สีของ border

คำนำทางและการใช้งาน

border-color ตั้งค่าสีของชายเขตสี่เส้น สามารถตั้งค่าสีระหว่าง 1 ถึง 4 สี

border-color คืออัตราย่อซึ่งสามารถตั้งค่าสีของชายเขตทั้งหมดขององค์ประกอบหรือตั้งค่าสีแยกต่างกันสำหรับสี่ชายเขต โปรดดูตัวอย่างด้านล่าง:

ตัวอย่าง 1

border-color:red green blue pink;
  • ขอบด้านบนเป็นสีแดง
  • ขอบขวาเป็นสีเขียว
  • ขอบด้านล่างเป็นสีสีน้ำเงิน
  • ขอบซ้ายเป็นสีชมพู

ตัวอย่าง 2

border-color:red green blue;
  • ขอบด้านบนเป็นสีแดง
  • ขอบขวาและขอบซ้ายเป็นสีเขียว
  • ขอบด้านล่างเป็นสีสีน้ำเงิน

ตัวอย่าง 3

border-color:dotted red green;
  • ขอบด้านบนและขอบด้านล่างเป็นสีแดง
  • ขอบขวาและขอบซ้ายเป็นสีเขียว

ตัวอย่าง 4

border-color:red;
  • ขอบทั้งสี่เป็นสีแดง

จำได้ว่ารูปแบบของขอบไม่สามารถเป็น none หรือ hidden ได้ ไม่เช่นนั้นขอบจะไม่แสดง

หมายเหตุ：ให้ติดตามเสมอว่าคุณจะประกาศคุณสมบัติ border-style ก่อน border-color คุณจะเปลี่ยนสีขององค์ประกอบ

ดูเพิ่มเติม:

การเรียนรู้ CSS:CSS ขอบเขต

คู่มืออ้างอิง HTML DOM:borderColor คุณสมบัติ

ตัวอย่าง

ตั้งค่าสีขอบสี่เหลี่ยมบนสี่ขอบ:

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

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

การใช้งาน CSS

border-color: color|transparent|initial|inherit;

ค่าของอัตรายอมรับ

ค่า คำอธิบาย
color_name กำหนดสีขอบในรูปแบบชื่อสี (เช่น red)
hex_number กำหนดสีขอบในรูปแบบหลักฐานสี (เช่น #ff0000)
rgb_number กำหนดสีขอบในรูปแบบ rgb รหัส (เช่น rgb(255,0,0))
transparent ค่าเริ่มต้น. สีขอบเป็นโปรง
inherit กำหนดให้มีการสืบทอดสีขอบจากตัวเครื่องเขียนพ่อ

ข้อมูลเทคนิค

ค่าเริ่มต้น： not specified
การสืบทอด： no
เวอร์ชั่น： CSS1
JavaScript การใช้งาน object.style.borderColor="#FF0000 blue"

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

ตั้งค่าสีของขอบสี่เหลี่ยมบนสี่ขอบ
ตัวอย่างนี้แสดงวิธีการตั้งค่าสีของขอบสี่เหลี่ยมบนสี่ขอบของโปรแกรม。สามารถตั้งค่าสี 1 ถึง 4 สี

การสนับสนุนโปรแกรมนี้

ตัวเลขในตารางแสดงการสนับสนุนคุณสมบัติที่สามารถใช้ได้ทั้งหมดในตัวเครื่องเขียนแรก

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

หมายเหตุ：Internet Explorer 6 (และตัวเครื่องเขียนเก่ากว่านี้) ไม่สนับสนุนค่าของอัตรายอมรับ "transparent"。

หมายเหตุ：IE7 และตัวเครื่องเขียนเก่ากว่านี้ไม่สนับสนุนค่า "inherit"。IE8 ต้องการ !DOCTYPE。IE9 สนับสนุน "inherit"。