ใน css นั้น เราสามารถสร้าง border หรือ เส้นกรอบให้กับ tag ต่างๆ ได้ ซึ่ง property ของ border ใน css นั้นมีอยู่หลายตัวครับ ได้แก่ border-width, border-style, border-color และ property border แบบรวม

border-width

ใช้ในการกำหนดขนาดของกรอบของวัตถุทั้ง 4 ด้าน (top,right,bottom,left)
เช่น border-width: 4px 5px 5px 9px;

border-color

ใช้ในการกำหนดสีกรอบของวัตถุทั้ง 4 ด้าน (top,right,bottom,left) แต่จะใช้ property ตัวนี้ได้ ต้องกำหนด style ให้กับ borderในcss ก่อน
เช่น border-color: #fff000;

border-style

ใช้ในการกำหนดลักษณะหรือรูปแบบกรอบของวัตถุทั้ง 4 ด้าน ซึ่งรูปแบบของ border ด้วยกันมันมีดังนี้

dotted
dashed
solid
double
groove
ridge
inset
outset

none ไม่แสดง border

hidden ไม่แสดง border

การกำหนด property border แบบรวม

เราสามารถกำหนด border ใน css แบบรวมได้ครับ border: border-width border-style border-color ;
เช่น border: 1px solid #666;

นอกจากนี้เรายังสามารถกำหนด property border ใน css ในแต่ละด้านของกรอบได้ครับ

border-top: 1px #000 dotted;
border-right: 5px #999 double;
border-bottom: 1px #666 dashed;
border-left: 5px #333 inset;

Tags: ,

Leave a Reply