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 ใช้กำหนดคุณสมบัติให้กับกรอบด้านขวา

Exampleกำหนดขนาด 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>
Output
กำหนดขนาดให้เส้นกรอบทั้ง 4 ด้านมีค่า 5px
Exampleกำหนดขนาด border
<div class=”output_box” style=”border-width:1px 10px”>
<br /><br /><br />
</div>
Output
กำหนดขนาดให้เส้นกรอบ บน ล่าง เป็น 1px, และขนาดเส้นกรอบ ซ้าย ขวา เป็น 10px
Exampleกำหนดขนาด border
<div class=”output_box” style=”border-width:1px 10px 20px”>
<br /><br /><br />
</div>
Output
กำหนดขนาดให้เส้นกรอบ บน เป็น 1px, ขนาดเส้นกรอบ ซ้าย ขวา เป็น 10px และขนาดเส้นกรอบ ล่าง เป็น 20px
Exampleกำหนดขนาด 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>
Output
กำหนดขนาดให้เส้นกรอบ 1px 10px 20px 30px เป็นขนาดของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำดับ
Exampleลักษณะ border
<div style=”border-style:dashed dotted solid double; border-color:#FF6633″>
<br /><br /><br /><br />
</div>
Output
กำหนดลักษณะให้เส้นกรอบในคำสั่งเดียว dashed dotted solid double เป็นลักษณะของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำดับ

Exampleกำหนดสี border
<div style=”border-style:solid; border-color:red blue green black”>
<br /> <br /> <br />
</div>
Output
กำหนดสีให้เส้นกรอบในคำสั่งเดียว red blue green black เป็นสีของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำดับ

Exampleกำหนด 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>
Output
กำหนด property ให้กับ border ได้ในคำสั่งประกาศเดียว