CSS Borders
คุณสมบัติเส้นขอบ CSS ช่วยให้คุณระบุรูปแบบ ความกว้าง และสีของเส้นขอบขององค์ประกอบได้
ฉันมีพรมแดนทุกด้าน
ฉันมีขอบล่างสีแดง
ฉันมีขอบโค้งมน
สไตล์เส้นขอบ CSS
คุณสมบัติborder-styleระบุชนิดของเส้นขอบที่จะแสดง
อนุญาตให้ใช้ค่าต่อไปนี้:
dotted- กำหนดเส้นขอบประdashed- กำหนดเส้นขอบประsolid- กำหนดเส้นขอบทึบdouble- กำหนดเส้นขอบคู่groove- กำหนดเส้นขอบร่อง 3 มิติ ผลขึ้นอยู่กับค่าสีขอบridge- กำหนดเส้นขอบแบบ 3 มิติ ผลขึ้นอยู่กับค่าสีขอบinset- กำหนดเส้นขอบที่ใส่เข้าไป 3 มิติ ผลขึ้นอยู่กับค่าสีขอบoutset- กำหนดเส้นขอบเริ่มต้น 3 มิติ ผลขึ้นอยู่กับค่าสีขอบnone- กำหนดไม่มีพรมแดนhidden- กำหนดเส้นขอบที่ซ่อนอยู่
คุณสมบัติborder-styleสามารถมีค่าได้ตั้งแต่หนึ่งถึงสี่ค่า (สำหรับขอบบน ขอบขวา ขอบล่าง และขอบซ้าย)
ตัวอย่าง
การสาธิตรูปแบบเส้นขอบต่างๆ:
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
ผลลัพธ์:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
หมายเหตุ:ไม่มีคุณสมบัติเส้นขอบ CSS อื่นใด (ซึ่งคุณจะได้เรียนรู้เพิ่มเติมในบทต่อไป) จะมีผลใดๆ เว้นแต่
border-styleคุณสมบัติจะถูกตั้งค่า!