CSS, HTML Border เราสามารถกำหนดลักษณะเส้นกรอบ HTML CSS TABLE DIV

Website AB191 update story CSS HTML Of CSS HTML Border เราสามารถกำหนดลักษณะเส้นกรอบ HTML CSS TABLE DIV Tuesday, May 28, 2013 Story at now !!!

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

Update Story at Tuesday, May 28, 2013 In Category CSS HTML Story CSS HTML Border เราสามารถกำหนดลักษณะเส้นกรอบ HTML CSS TABLE DIV