Border

เราสามารถกำหนดลักษณะเส้นกรอบของ Element ต่างๆ ได้ เช่น <p>, <div> เป็นต้น 

Property	Description	Values
border-width	ใช้กำหนดขนาดของกรอบของวัตถุทั้ง 4 ด้าน	thin medium thick length	เช่น 5px, 5pt
border-style	ใช้การกำหนดลักษณะของกรอบของวัตถุทั้ง 4 ด้าน	none hidden dotted dashed solid double groove ridge inset outset	dotted dashed solid double groove ridge inset outset
border-color	ใช้การกำหนดสีกรอบของวัตถุทั้ง 4 ด้าน *ต้องกำหนด style ก่อน	color
border	สามารถกำหนด property ให้กับ border ได้ในคำสั่งประกาศเดียว	border-width border-style border-color
border-top-width border-top-style border-top-color border-top	่ใช้กำหนดคุณสมบัติให้กับกรอบด้านบน
border-bottom-width border-bottom-style border-bottom-color border-bottom	ใช้กำหนดคุณสมบัติให้กับกรอบด้านล่าง
border-left-width border-left-style border-left-color border-left	ใช้กำหนดคุณสมบัติให้กับกรอบด้านซ้าย
border-right-width bordr-right-style border-right-color border-righte	ใช้กำหนดคุณสมบัติให้กับกรอบด้านขวา

ตัวอย่าง


กำหนดขนาด border

<div style="border-top-width:5px; border-right-width:5px; border-bottom-width:5px; border-left-width:5px;">
<br /> <br /> <br />
</div>

หรือ

<div style="border-width:5px">
<br /><br /><br />
</div> 

ผลลัพธ์

กำหนดขนาดให้เส้นกรอบทั้ง 4 ด้านมีค่า 5px

ตัวลัพธ์


กำหนดขนาด border

<div class="output_box" style="border-width:1px 10px">
<br /><br /><br />
</div>

ผลลัพธ์

กำหนดขนาดให้เส้นกรอบ บน ล่าง เป็น 1px, และขนาดเส้นกรอบ ซ้าย ขวา เป็น 10px

ตัวอย่าง


กำหนดขนาด border

<div class="output_box" style="border-width:1px 10px 20px">
<br /><br /><br />
</div>

ผลลัพธ์

กำหนดขนาดให้เส้นกรอบ บน เป็น 1px, ขนาดเส้นกรอบ ซ้าย ขวา เป็น 10px และขนาดเส้นกรอบ ล่าง เป็น 20px

ตัวอย่าง

กำหนดขนาด border

<div class="output_box" style="border-top-width:1px; border-right-width:10px; border-bottom-width:20px; border-left-width:30px;">
<br /> <br /> <br />

หรือ

</div> <div class="output_box" style="border-width:1px 10px 20px 30px">
<br /><br /><br />
</div>

ผลลัพธฺ์

กำหนดขนาดให้เส้นกรอบ 1px 10px 20px 30px เป็นขนาดของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำดับ

ตัวอย่าง

ลักษณะ border

<div style="border-style:dashed dotted solid double; border-color:#FF6633">
<br /><br /><br /><br />
</div>

ผลลัพธ์

กำหนดลักษณะให้เส้นกรอบในคำสั่งเดียว dashed dotted solid double เป็นลักษณะของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำดับ

ตัวอย่าง

กำหนดสี border

<div style="border-style:solid; border-color:red blue green black">
<br /> <br /> <br />
</div>

ผลลัพธ์

กำหนดสีให้เส้นกรอบในคำสั่งเดียว red blue green black เป็นสีของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำดับ

ตัวอย่าง 

กำหนด property ให้กับ border ในคำสั่งประกาศเดียว

<div style="border-width:5px; border-style:double; border-color:#336699">
<br /> <br /> <br />
</div>

หรือ

<div style="border:5px double #336699">
<br /> <br /> <br />
</div>

ผลลัพธ์

กำหนด property ให้กับ border ได้ในคำสั่งประกาศเดียว