CSS Border Color
CSS Border Color
คุณสมบัติborder-color
นี้ใช้เพื่อกำหนดสีของเส้นขอบทั้งสี่
สามารถกำหนดสีได้โดย:
- ชื่อ - ระบุชื่อสี เช่น "แดง"
- HEX - ระบุค่า HEX เช่น "#ff0000"
- RGB - ระบุค่า RGB เช่น "rgb(255,0,0)"
- HSL - ระบุค่า HSL เช่น "hsl(0, 100%, 50%)"
- โปร่งใส
หมายเหตุ:หากborder-color
ไม่ได้ตั้งค่า จะรับช่วงสีขององค์ประกอบ
ตัวอย่าง
การสาธิตสีขอบต่างๆ:
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color:
blue;
}
ผลลัพธ์:
Red border
Green border
Blue border
สีด้านเฉพาะ
คุณสมบัติborder-color
สามารถมีค่าได้ตั้งแต่หนึ่งถึงสี่ค่า (สำหรับขอบบน ขอบขวา ขอบล่าง และขอบซ้าย)
ตัวอย่าง
p.one {
border-style: solid;
border-color: red green blue yellow;
/* red top, green right, blue bottom and yellow left */
}
ค่า HEX
สีของเส้นขอบสามารถระบุได้โดยใช้ค่าฐานสิบหก (HEX):
ตัวอย่าง
p.one {
border-style: solid;
border-color: #ff0000; /* red
*/
}
ค่า RGB
หรือโดยใช้ค่า RGB:
ตัวอย่าง
p.one {
border-style: solid;
border-color: rgb(255, 0, 0);
/* red */
}
ค่า HSL
คุณยังสามารถใช้ค่า HSL:
ตัวอย่าง
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%);
/* red */
}
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับค่า HEX, RGB และ HSL ในบทCSS Colors ของเรา