คุณสมบัติCSS border-color
ตัวอย่าง
กำหนดสีให้กับเส้นขอบ:
div {border-color: coral;}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติborder-color
กำหนดสีของเส้นขอบทั้งสี่ขององค์ประกอบ คุณสมบัตินี้สามารถมีค่าได้ตั้งแต่หนึ่งถึงสี่ค่า
หากคุณสมบัติ border-color มีค่าสี่ค่า:
- ขอบสี: แดง เขียว น้ำเงิน ชมพู;
- ขอบบนเป็นสีแดง
- ขอบขวาเป็นสีเขียว
- ขอบล่างสีน้ำเงิน
- ขอบซ้ายสีชมพู
หากคุณสมบัติ border-color มีค่าสามค่า:
- ขอบสี: แดง เขียว น้ำเงิน;
- ขอบบนเป็นสีแดง
- ขอบขวาและซ้ายเป็นสีเขียว
- ขอบล่างสีน้ำเงิน
หากคุณสมบัติ border-color มีค่าสองค่า:
- ขอบสี: แดงเขียว;
- ขอบบนและล่างเป็นสีแดง
- ขอบขวาและซ้ายเป็นสีเขียว
หากคุณสมบัติ border-color มีค่าเดียว:
- ขอบสี: สีแดง;
- ขอบทั้งสี่เป็นสีแดง
หมายเหตุ:ประกาศคุณสมบัติborder-styleก่อนborder-color
คุณสมบัติเสมอ องค์ประกอบต้องมีเส้นขอบก่อนที่คุณจะเปลี่ยนสีได้
ค่าเริ่มต้น: | สีปัจจุบันขององค์ประกอบ |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS1 |
ไวยากรณ์ JavaScript: | วัตถุ .style.borderColor="#FF0000 สีน้ำเงิน" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
border-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
ไวยากรณ์ CSS
border-color: color|transparent|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
color | Specifies the border color. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element | |
transparent | Specifies that the border color should be transparent | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
กำหนดสีให้กับเส้นขอบด้วยค่า HEX:
div {border-color: #92a8d1;}
ตัวอย่าง
กำหนดสีให้กับเส้นขอบด้วยค่า RGB:
div {border-color: rgb(201, 76, 76);}
ตัวอย่าง
กำหนดสีให้กับเส้นขอบด้วยค่า RGBA:
div {border-color: rgba(201, 76, 76, 0.3);}
ตัวอย่าง
กำหนดสีให้กับเส้นขอบด้วยค่า HSL:
div {border-color: hsl(89, 43%, 51%);}
ตัวอย่าง
กำหนดสีให้กับเส้นขอบด้วยค่า HSLA:
div {border-color: hsla(89, 43%, 51%, 0.3);}
ตัวอย่าง
กำหนดสีเส้นขอบที่แตกต่างกันสำหรับแต่ละด้านขององค์ประกอบ:
div.ex1 {border-color: #0000ff;}
div.ex2 {border-color: #ff0000 #0000ff;}
div.ex3 {border-color: #ff0000 #00ff00 #0000ff;}
div.ex4 {border-color:
#ff0000 #00ff00 #0000ff rgb(250,0,255);}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS Border
การอ้างอิง HTML DOM: borderColor คุณสมบัติ