CSS สีขอบ

CSS สีขอบ

border-color คุณสมบัติใช้สำหรับตั้งค่าสีของขอบเขตสี่ด้าน。

สามารถตั้งค่าสีด้วยวิธีต่อไปนี้:

  • name - กำหนดชื่อสี อย่างเช่น "red"
  • HEX - กำหนดค่าไฮเพ็กซ์ อย่างเช่น "#ff0000"
  • RGB - กำหนดค่า RGB อย่างเช่น "rgb(255,0,0)"
  • HSL - กำหนดค่า HSL อย่างเช่น "hsl(0, 100%, 50%)"
  • transparent

หมายเหตุ:ถ้ายังไม่ได้ตั้งค่า 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;
}

ผลลัพธ์:

ขอบเขตเส้นตรงสีแดง

ขอบเขตเส้นตรงสีเขียว

เข็มโค้งสีน้ำเงิน

ทดสอบด้วยตัวเอง

สีของขอบเขตเฉพาะ

border-color คุณสมบัติสามารถตั้งค่าจำนวนหนึ่งถึงสี่รายการ (ใช้สำหรับเข็มโค้งบน ขวา ด้านล่าง และซ้าย)。

ตัวอย่าง

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* ขึ้นแดง ขวาเขียว ด้านล่างสีน้ำเงิน ซ้ายสีเหลือง */
}

ทดสอบด้วยตัวเอง

ค่า HEX

สีของเขตตรงข้ามยังสามารถกำหนดด้วยค่าทศนิยมตัวเลขหกตัว (HEX):

ตัวอย่าง

p.one {
  border-style: solid;
  border-color: #ff0000; /* สีแดง */
}

ทดสอบด้วยตัวเอง

ค่า RGB

หรือใช้ค่า RGB:

ตัวอย่าง

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* สีแดง */
}

ทดสอบด้วยตัวเอง

ค่า HSL

ยังสามารถใช้ค่า HSL ได้:

ตัวอย่าง

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* สีแดง */
}

ทดสอบด้วยตัวเอง

คุณสามารถทดสอบด้วยตัวเองใน CSS สี คุณสามารถเรียกทราบเพิ่มเติมเกี่ยวกับค่า HEX RGB และ HSL ในบทวิชานี้