กรอบและขอบเขต CSS: เส้นขอบ องค์ประกอบเส้นขอบ CSS เส้นขอบคู่

คำอธิบาย

คุณสมบัติเส้นขอบทั่วไปช่วยให้คุณสามารถตั้งค่าความหนา สไตล์ และสีของเส้นขอบรอบๆ องค์ประกอบได้พร้อมกัน ค่าสามารถอยู่ในลำดับใดก็ได้โดยคั่นด้วยช่องว่าง เบราว์เซอร์จะกำหนดว่าค่าใดที่สอดคล้องกับคุณสมบัติที่ต้องการ หากต้องการตั้งค่าเส้นขอบเฉพาะบางด้านขององค์ประกอบ ให้ใช้คุณสมบัติ border-top , border-bottom , border-left , border-right

ไวยากรณ์

ค่านิยม

ค่าความกว้างของเส้นขอบจะกำหนดความหนาของเส้นขอบ

มีการจัดเตรียมค่าสไตล์เส้นขอบหลายค่าเพื่อควบคุมลักษณะที่ปรากฏ

ชื่อและผลของการกระทำแสดงไว้ในรูปที่ 1 1.

รูปที่ 1. รูปแบบของเฟรม

border-color กำหนดสีของเส้นขอบ ค่าสามารถอยู่ในรูปแบบใดก็ได้ที่ CSS อนุญาต

ชายแดน

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. คุณเพียงแค่ต้องทำเช่นนี้และทำขั้นตอนสุดท้ายให้เสร็จสิ้น

ตัวอย่างนี้เพิ่มเส้นขอบสองชั้นรอบเลเยอร์ ผลลัพธ์จะแสดงในรูป 2.

ข้าว. 2. การใช้คุณสมบัติเส้นขอบ

แบบจำลองวัตถุ

document.getElementById("elementID ").style.border เบราว์เซอร์เบราว์เซอร์

อินเทอร์เน็ตเอ็กซ์พลอเรอร์

จนถึงเวอร์ชันที่ 6 โดยมีความหนาของเส้นขอบ 1px โดยจะแสดงจุดเป็นเส้นประ ด้วยความหนาตั้งแต่ 2px ขึ้นไป ค่าจุดจะทำงานได้อย่างถูกต้อง ข้อผิดพลาดนี้ได้รับการแก้ไขใน IE7 แต่สำหรับเส้นขอบ 1px ทั้งหมดเท่านั้น หากเส้นขอบของบล็อกอันใดอันหนึ่งมีความหนา 2px หรือสูงกว่า ดังนั้นใน IE7 ค่าจุดจะกลายเป็นเส้นประ Internet Explorer เวอร์ชันสูงสุดและรวมถึง 7.0 ไม่รองรับค่าที่สืบทอดสไตล์เส้นขอบใน

เบราว์เซอร์ที่แตกต่างกันอาจแตกต่างกันเล็กน้อยเมื่อใช้ค่าร่อง สัน ส่วนที่แทรกหรือค่าเริ่มต้น เส้นขอบ CSS, องค์ประกอบคือหนึ่งบรรทัดขึ้นไปที่ล้อมรอบเนื้อหาขององค์ประกอบและช่องว่างภายใน เส้นขอบถูกระบุโดยใช้คุณสมบัติเส้นขอบชวเลข รูปแบบเฟรมถูกกำหนดโดยใช้คุณสมบัติสามประการ:สไตล์ สี.

และ

ความกว้าง

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

ไวยากรณ์

P (รูปแบบเส้นขอบ: solid;) p (รูปแบบเส้นขอบด้านบน: solid;)

2. สีกรอบ-สีขอบ

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

ไวยากรณ์

P (สีขอบ: #cacd58;)

3. ความกว้างของขอบ

ความกว้างของเฟรมระบุโดยใช้หน่วยความยาวหรือ คำหลัก- หากคุณสมบัติรูปแบบเส้นขอบถูกตั้งค่าเป็น none และเส้นขอบขององค์ประกอบถูกตั้งค่าเป็นความกว้างบางระดับ ในกรณีนี้ ความกว้างของเส้นขอบจะถูกตั้งค่าเป็นศูนย์ ไม่ได้รับมรดก

ไวยากรณ์

P (ความกว้างของเส้นขอบ: 2px;)

4. การตั้งเฟรมด้วยคุณสมบัติเดียว

คุณสมบัติ border ช่วยให้คุณสามารถรวมคุณสมบัติต่อไปนี้: border-width , border-style , border-color ตัวอย่างเช่น:

Div ( กว้าง: 100px; สูง: 100px; เส้นขอบ: 2px สีเทาทึบ; )

ในกรณีนี้ คุณสมบัติที่ระบุจะถูกนำไปใช้กับเส้นขอบทั้งหมดขององค์ประกอบพร้อมกัน หากไม่มีการระบุค่าใดๆ ค่าเริ่มต้นจะเข้ามาแทนที่

5. การตั้งค่าเฟรมสำหรับหนึ่งเส้นขอบขององค์ประกอบ

ในกรณีที่คุณจำเป็นต้องระบุรูปแบบเส้นขอบที่แตกต่างกันสำหรับองค์ประกอบ คุณสามารถใช้เครื่องหมายชวเลขสำหรับเส้นขอบที่เกี่ยวข้องได้
คุณสมบัติที่แสดงด้านล่างรวมคุณสมบัติต่อไปนี้เป็นการประกาศเดียว: border-width , border-style และ border-color รายการคุณสมบัติระบุไว้ตามลำดับที่กำหนด ในขณะที่สามารถข้ามค่าหนึ่งหรือสองค่าได้ ซึ่งในกรณีนี้ค่าเหล่านั้นจะใช้เป็นค่าเริ่มต้น

รูปแบบของเส้นขอบด้านบนถูกกำหนดโดยใช้คุณสมบัติ border-top, ด้านล่าง - border-bottom, ซ้าย - border-left และ right - border-right

ไวยากรณ์

P (ขอบบน: 2px สีเทาทึบ;)

คำอธิบาย

ตั้งค่ารูปแบบเส้นขอบรอบองค์ประกอบ อนุญาตให้กำหนดสไตล์เฉพาะสำหรับด้านต่างๆ ขององค์ประกอบได้

ไวยากรณ์

รูปแบบเส้นขอบ: (1,4) | สืบทอด

ค่านิยม

มีการจัดเตรียมค่าหลายค่าสำหรับคุณสมบัติสไตล์เส้นขอบเพื่อควบคุมลักษณะที่ปรากฏของเส้นขอบ

ลักษณะที่ปรากฏขึ้นอยู่กับเบราว์เซอร์ที่ใช้และการตั้งค่าความหนาของเส้นขอบ ในตาราง 1 แสดงชื่อของสไตล์และกรอบผลลัพธ์สำหรับค่าความหนาที่แตกต่างกัน - 1, 3, 5 และ 7 พิกเซล

นอกจากค่าที่แสดงในตารางแล้ว ยังใช้คีย์เวิร์ดต่อไปนี้อีกด้วย

ไม่มี ไม่แสดงเส้นขอบและความหนา (ความกว้างของเส้นขอบ) ถูกตั้งค่าเป็นศูนย์

border-color กำหนดสีของเส้นขอบ ค่าสามารถอยู่ในรูปแบบใดก็ได้ที่ CSS อนุญาต

ซ่อนไว้ มีผลเช่นเดียวกับไม่มี ยกเว้นการใช้ลักษณะเส้นขอบกับเซลล์ตารางที่มีคุณสมบัติ border-collapse ตั้งค่าให้ยุบ ในกรณีนี้ เส้นขอบรอบๆ เซลล์จะไม่ปรากฏเลย

inherit สืบทอดค่าของพาเรนต์ คุณสามารถใช้ค่าหนึ่ง สอง สาม หรือสี่ค่า โดยคั่นด้วยช่องว่าง ผลลัพธ์ขึ้นอยู่กับปริมาณและระบุไว้ในตาราง 2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

ผลลัพธ์

ตัวอย่างนี้เพิ่มเส้นขอบสองชั้นรอบเลเยอร์ ผลลัพธ์จะแสดงในรูป 2.

ตัวอย่างนี้

แบบจำลองวัตถุ

แสดงในรูปที่. 1.

Internet Explorer เวอร์ชันสูงสุดและรวมถึง 7.0 ไม่รองรับค่าที่ซ่อนอยู่และสืบทอด

รูปแบบเส้นขอบอาจแตกต่างกันเล็กน้อยระหว่างเบราว์เซอร์เมื่อใช้ค่าร่อง ริดจ์ สิ่งที่แทรก หรือค่าเริ่มต้น

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

คุณสมบัติทั้งสามนี้ (ความหนาของเส้นขอบ รูปแบบเส้นขอบ และสี) สามารถตั้งค่าได้ในการประกาศครั้งเดียว นี่คือตัวอย่าง:

คุณสามารถระบุรูปแบบเส้นขอบได้เพียงด้านเดียวขององค์ประกอบ เมื่อต้องการทำสิ่งนี้ ให้ใช้คุณสมบัติ border-top (ขอบบน), border-right (ขอบขวา), border-bottom (ขอบล่าง), border-left (ขอบซ้าย)

ในตัวอย่างนี้ แต่ละด้านของบล็อกมีความหนา สไตล์ และสีเส้นขอบที่แตกต่างกัน

ลองคิดดูว่าจะทำยังไง ความช่วยเหลือเกี่ยวกับ CSSคุณสามารถสร้างรูปร่างดังนี้:

ค่าเส้นขอบ - ความหนา, สไตล์และสี - สามารถตั้งค่าแยกกันได้โดยใช้คุณสมบัติพิเศษ

• สไตล์เส้นขอบ - สไตล์เส้นขอบ
• ความกว้างของเส้นขอบ - ความกว้างของเส้นขอบ
• สีขอบ - สีขอบ

ลองพิจารณาแต่ละค่าแยกกัน

คุณสมบัติสไตล์เส้นขอบ สไตล์เส้นขอบ

คุณสมบัติ border-style กำหนดรูปแบบของเส้นขอบ ใน CSS ใน ความแตกต่างของ HTMLขอบขององค์ประกอบไม่เพียงแต่เป็นสีทึบเท่านั้น ยอมรับค่าต่อไปนี้สำหรับรูปแบบเส้นขอบ:

1. ไม่มี - ไม่มีเส้นขอบ (ค่าเริ่มต้น)
2. ทึบ - เส้นขอบทึบ
3. สองเท่า - เส้นขอบคู่
4. ประ - เส้นขอบประ
5. ประ - เส้นขอบที่ทำจากชุดจุด
6. สันเขา - เส้นขอบ "สันเขา"
7. ร่อง - เส้นขอบ "ร่อง"
8. สิ่งที่ใส่เข้าไป - เส้นขอบหดหู่
9. เริ่มแรก - ชายแดนอัด

ตัวอย่างสิ่งที่พวกเขาดูเหมือน

ไม่มีเส้นขอบ (ไม่มี)

เส้นขอบทึบ

เส้นขอบคู่

เส้นขอบของชุดจุด (ประ)

ขอบประ

ขอบร่อง

ขอบสันเขา

เส้นขอบเยื้อง (สิ่งที่ใส่เข้าไป)

ขอบอัด (เริ่มแรก)

อย่างไรก็ตาม หากคุณตั้งค่าสีของเส้นขอบเป็นสีดำสำหรับกรอบสัน คุณจะได้ผลลัพธ์นี้

บล็อก div ที่มีเส้นขอบสีดำและลักษณะสัน

กรอบดูมั่นคง แต่นั่นเป็นเพราะลักษณะสันถูกสร้างขึ้นโดยการเพิ่มเอฟเฟ็กต์เงาสีดำ และเอฟเฟ็กต์สีดำจะไม่ปรากฏบนกรอบสีดำ

การใช้คุณสมบัติสไตล์เส้นขอบ ทำให้สามารถตั้งค่าสไตล์เส้นขอบได้ไม่เฉพาะกับทุกด้านของบล็อกเท่านั้น คุณสามารถตั้งค่าได้หลายค่าสำหรับคุณสมบัติสไตล์เส้นขอบเดียว ขึ้นอยู่กับจำนวนค่า สไตล์เส้นขอบจะถูกกำหนดให้กับจำนวนด้านที่แตกต่างกันของบล็อก คุณสามารถตั้งค่าหนึ่ง สอง สาม หรือสี่ค่าได้ ลองดูตัวอย่างสำหรับแต่ละกรณี

ค่าเดียว (ทึบ) - รูปแบบเส้นขอบถูกตั้งค่าไว้สำหรับทุกด้านของบล็อก

สองค่า (ทึบสองเท่า) - ค่าแรกกำหนดสไตล์สำหรับด้านบนและด้านล่าง ค่าที่สองสำหรับด้านข้าง

สามค่า (จุดทึบคู่) - ค่าแรกสำหรับด้านบน ค่าที่สองสำหรับด้านข้าง ค่าที่สามสำหรับด้านล่าง

สี่ค่า (เส้นประประคู่ทึบ) - แต่ละค่าสำหรับด้านหนึ่งตามเข็มนาฬิกาโดยเริ่มจากด้านบน

คุณสมบัติเส้นขอบความกว้าง ความหนาของเส้นขอบ

ในการกำหนดความกว้างของเส้นขอบขององค์ประกอบให้ใช้คุณสมบัติ border-width ความหนาของเส้นขอบสามารถระบุได้ในหน่วยการวัดสัมบูรณ์ใดๆ เช่น พิกเซล

เช่นเดียวกับคุณสมบัติรูปแบบเส้นขอบ คุณสมบัติสามารถตั้งค่าเป็นค่าหนึ่งถึงสี่ค่าได้ ลองดูตัวอย่างสำหรับแต่ละกรณี

รหัสตัวอย่าง:

นอกจากนี้ยังมีค่าคำหลักสำหรับคุณสมบัติความกว้างของเส้นขอบ มีทั้งหมด 3 ประการ คือ

• ขอบบาง - บาง;
• ความหนาปานกลาง - เฉลี่ย
• ขอบหนา - หนา

ความหนาของขอบ: บาง

ความหนาของขอบ: ปานกลาง

ความหนาของขอบ: หนา

คุณสมบัติสีเส้นขอบ สีขอบ.

หากต้องการควบคุมสีเส้นขอบ ให้ใช้เครื่องมือสีเส้นขอบ สีสำหรับคุณสมบัตินี้สามารถตั้งค่าโดยใช้วิธีการใดก็ได้ที่อธิบายไว้ในบทความ "สีใน CSS" กล่าวคือ:

• สัญกรณ์เลขฐานสิบหก (#ff00aa) ของสี
• รูปแบบ RGB คือ rgb(255,12,110) รูปแบบ RGBA สำหรับ CSS3
• รูปแบบ HSL และ HSLA สำหรับ CSS3
• ชื่อสี เช่น สีดำ รายการเต็มชื่อสีมีระบุไว้ในตารางชื่อสี CSS

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

หนึ่งค่า (สีแดง)

สองค่า (แดงดำ)

สามค่า (แดง ดำ เหลือง)

สี่ค่า (แดง ดำ เหลือง น้ำเงิน)

ตอนนี้เรากลับมาที่ปัญหาที่ระบุไว้ข้างต้นแล้ววาดรูป:

นี่คือโค้ดที่วาดรูปดังกล่าวซึ่งมีขนาดใหญ่กว่าเท่านั้น:

ตั้งค่าด้านข้างแยกกัน

ตามที่กล่าวไว้ข้างต้นว่าคุณสามารถระบุค่าคุณสมบัติเส้นขอบสำหรับด้านเดียวของบล็อกได้ มีคุณสมบัติเพื่อวัตถุประสงค์เหล่านี้:

• ขอบบน (ขอบบน)
• เส้นขอบขวา
• ขอบล่าง
• ขอบซ้าย (ขอบซ้าย)

ฉันขอเตือนคุณว่ามีการระบุค่าสามค่าสำหรับคุณสมบัติทั้งหมด (ความหนา สไตล์ และสี) ตามลำดับใดก็ได้ แต่มีคุณสมบัติที่ให้คุณกำหนดความหนา สี และสไตล์ของแต่ละด้านแยกกันได้ การเขียนคุณสมบัติเหล่านี้ได้มาจากที่กล่าวมาข้างต้น

ตัวเลือกขอบบน (ขอบ-บน)

• border-top-color - กำหนดสีของเส้นขอบด้านบนขององค์ประกอบ
• border-top-width - กำหนดความหนาของเส้นขอบด้านบนขององค์ประกอบ
• border-top-style - กำหนดรูปแบบของเส้นขอบด้านบนขององค์ประกอบ

ตัวเลือกเส้นขอบขวา (เส้นขอบ-ขวา)

• border-right-color - กำหนดสีของเส้นขอบด้านขวาขององค์ประกอบ
• border-right-width - กำหนดความหนาของเส้นขอบด้านขวาขององค์ประกอบ
• border-right-style - กำหนดรูปแบบของเส้นขอบด้านขวาขององค์ประกอบ

ตัวเลือกเส้นขอบล่าง (เส้นขอบ-ล่าง)

• border-bottom-color - กำหนดสีของเส้นขอบด้านล่างขององค์ประกอบ
• border-bottom-width - กำหนดความหนาของเส้นขอบด้านล่างขององค์ประกอบ
• border-bottom-style - กำหนดรูปแบบของเส้นขอบด้านล่างขององค์ประกอบ

ตัวเลือกเส้นขอบด้านซ้าย (เส้นขอบซ้าย)

• border-left-color - กำหนดสีของเส้นขอบด้านซ้ายขององค์ประกอบ
• border-left-width - กำหนดความหนาของเส้นขอบด้านซ้ายขององค์ประกอบ
• border-left-style - กำหนดรูปแบบของเส้นขอบด้านซ้ายขององค์ประกอบ

ตัวอย่างการใช้คุณสมบัติเหล่านี้:

คุณสมบัติรัศมีชายแดน การปัดเศษมุมเส้นขอบ

คุณสมบัติ border-radius มีวัตถุประสงค์เพื่อปัดเศษมุมของเส้นขอบขององค์ประกอบ คุณสมบัตินี้ถูกนำมาใช้ใน CSS3 และทำงานได้อย่างถูกต้องในเบราว์เซอร์สมัยใหม่ทั้งหมด ยกเว้น Internet Explorer 8 (และเวอร์ชันเก่ากว่า)

ค่าอาจเป็นตัวเลขใดก็ได้ที่ใช้ใน CSS

คุณสมบัติรัศมีชายแดน: 15px

หากไม่ได้ระบุเฟรมบล็อก เนื้อจะเกิดขึ้นกับพื้นหลัง นี่คือตัวอย่างของบล็อกโค้งมนที่ไม่มีเส้นขอบ แต่มีสีพื้นหลัง:

คุณสมบัติรัศมีชายแดน: 15px

มีคุณสมบัติสำหรับการปัดเศษแต่ละมุมขององค์ประกอบ ตัวอย่างนี้ใช้ทั้งหมด:

รัศมีขอบซ้ายบน: 15px; ขอบบนขวารัศมี: 0; ขอบล่างขวารัศมี: 15px; เส้นขอบล่างซ้ายรัศมี: 0;

คุณสมบัติรัศมีชายแดน: 15px

แม้ว่ารหัสนี้สามารถเขียนได้ในประกาศเดียว: border-radius : 15px 0 15px 0 ความจริงก็คือคุณสมบัติ border-radius สามารถตั้งค่าได้ตั้งแต่หนึ่งถึงสี่ค่า ตารางด้านล่างสรุปกฎเกณฑ์ที่ใช้บังคับกับการประกาศดังกล่าว

เมื่อศึกษาตารางนี้อย่างละเอียดแล้ว คุณจะเข้าใจได้ว่ารายการที่สั้นที่สุดสำหรับสไตล์ที่ต้องการจะเป็นดังนี้: border-radius : 15px 0 . มีเพียงสองความหมายเท่านั้น

ฝึกกันหน่อย

การวาดมะนาวโดยใช้ CSS

นี่คือรหัสสำหรับบล็อกดังกล่าว:

มาร์จิ้น: 0 อัตโนมัติ; /* จัดกึ่งกลางบล็อก */ ความกว้าง: 200px; ความสูง: 200px; พื้นหลัง: #F5F240; เส้นขอบ: 1px ทึบ #F0D900; รัศมีเส้นขอบ: 10px 150px 30px 150px;

เราได้วาดรูปนี้แล้ว:

ทีนี้ลองทิ้งรูปสามเหลี่ยมไว้:

รหัสสามเหลี่ยมคือ:

มาร์จิ้น: 0 อัตโนมัติ; /* จัดกึ่งกลางบล็อก */ ช่องว่างภายใน: 0px; ความกว้าง: 0px; ความสูง: 0; เส้นขอบ: สีขาวทึบ 30px; ขอบล่างสี: สีแดง;

เส้นขอบคือเส้นที่ล้อมรอบองค์ประกอบ (เนื้อหาที่มีอยู่และช่องว่างภายใน) ตัวอย่างที่เราพบแล้วคือเฟรมเซลล์ภายในตาราง

CSS มีเส้นขอบสองประเภท: เส้นขอบด้านในและเส้นด้านนอก คุณสมบัติ CSS ที่รับผิดชอบในการออกแบบเฟรมเริ่มต้นด้วยคำว่า "border" ซึ่งสามารถแปลได้ว่า "Frame", "Border" การมีอยู่และรูปแบบของโครงร่างด้านนอกถูกกำหนดโดยคุณสมบัติที่ขึ้นต้นด้วยคำว่า "โครงร่าง" โครงร่างต่างจากเส้นขอบตรงที่ไม่ส่งผลต่อความกว้างและตำแหน่งของบล็อกที่มีกรอบ นอกจากนี้ยังไม่สามารถติดตั้งได้เพียงด้านเดียวเท่านั้น เช่น ชายแดน- จากทุกด้านพร้อมกันเท่านั้น

ก่อนอื่น เรามาพูดถึงการออกแบบเส้นขอบกันก่อน จากนั้นเราจะไปต่อกันที่ โครงร่าง.

เส้นขอบกว้าง

ตั้งค่าความกว้างของเส้นขอบ เป็นที่ชัดเจนว่าโดยค่าเริ่มต้น องค์ประกอบจะล้อมรอบด้วยกรอบทั้งสี่ด้าน คุณสมบัติช่วยให้คุณกำหนดความกว้างของเส้นขอบให้เท่ากันทุกด้านหรือต่างกันสำหรับแต่ละด้าน คุณสามารถระบุค่าได้ตั้งแต่หนึ่งถึงสี่ค่าในกฎทั้งนี้ขึ้นอยู่กับความกว้างที่ต้องกำหนดให้กับเส้นขอบใด

คุณสามารถตั้งค่าความกว้างได้โดยใช้พิกเซล เปอร์เซ็นต์ และหน่วยความยาว CSS อื่นๆ หรือ คำที่สงวนไว้ บาง(2px) ปานกลาง(4px) และ หนา(6px)

ความกว้างของเส้นขอบ: 16px 12px 4px 8px;

สไตล์เส้นขอบ

กำหนดสไตล์เส้นขอบ โปรดทราบว่าหากคุณไม่ได้ตั้งค่ากฎนี้แต่ระบุคุณสมบัติ เส้นขอบกว้างจะไม่มีเฟรมเลย ดังนั้นหากคุณต้องการให้มีเส้นขอบที่มองเห็นได้ โปรดระบุให้ชัดเจน สไตล์เส้นขอบ.

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

ย่อหน้าสุดท้ายแสดงให้เห็นว่าสไตล์ของเฟรมในแต่ละด้านสามารถเป็นของตัวเองได้ เช่นเดียวกับความหนาของ:

ลักษณะเส้นขอบ: ทึบ สองจุด ไม่มี

เส้นขอบสี

ทำงานเหมือนกับคุณสมบัติก่อนหน้า แต่มีหน้าที่รับผิดชอบในเรื่องสีของเส้นขอบ คุณยังสามารถตั้งค่าได้ตั้งแต่หนึ่งถึงสี่ค่า และคุณก็ทราบผลลัพธ์แล้ว หากไม่ได้ตั้งค่ากฎ เฟรมจะมีสีข้อความขององค์ประกอบปัจจุบัน หรือหากไม่ได้ระบุ สีข้อความขององค์ประกอบหลัก

สีขอบ: #C85EFA;

inherit สืบทอดคุณค่าของพาเรนต์

ทำให้ง่ายต่อการเขียนและบันทึกโค้ดโดยอนุญาตให้คุณตั้งค่าคุณสมบัติทั้งหมดที่ระบุไว้สำหรับเส้นขอบในทุกด้านขององค์ประกอบในบรรทัดเดียว:

P ( เส้นขอบ: 2px สีเขียวทึบ; )

หากต้องการตั้งกฎที่แตกต่างกันสำหรับเฟรมที่อยู่คนละด้าน คุณสามารถใช้ค่าต่อไปนี้:

• ขอบด้านบน- ขีด จำกัด บน
• เส้นขอบขวา- ขวา.
• ขอบล่าง- ต่ำกว่า.
• ขอบซ้าย- ซ้าย.

P ( ขอบซ้าย: 6px จุดสีเหลือง; )

เค้าร่างกว้าง

เช่นเดียวกับ เส้นขอบกว้างเฉพาะเฟรมด้านนอกเท่านั้น ไม่ใช่เฟรมด้านใน ตั้งค่าความหนาของโครงร่างเป็นค่าเดียวกันกับ เส้นขอบกว้าง- นอกจากความหนาของเฟรมขององค์ประกอบแล้ว คุณต้องระบุสไตล์ของมัน ไม่เช่นนั้นจะไม่มีโครงร่าง

โครงร่างสไตล์

ค่าคุณสมบัติค่าที่ซ้ำกัน สไตล์เส้นขอบ- กฎจะระบุรูปแบบของเส้นขอบภายนอก