คุณสมบัติ border-style: groove ใช้คุณสมบัติ border-style ด้วยค่า groove เพื่อกำหนดขอบที่ดูเหมือนถูกแกะสลักเข้าไปในหน้า ลองรันโค้ดต่อไปนี้เพื่อนำ border-style property ไปใช้: ตัวอย่าง <html> <head> </head> <body> <p style=border-width:4px; border-style:none;>

คุณสมบัติ border-style: inset เพื่อกำหนดขอบแบบ inset ด้วย CSS ให้ใช้คุณสมบัติ border-style ด้วยค่า inset ตัวอย่าง <html> <head> </head> <body> <p style=border-width:4px; border-style:none;> This is a border with none width. </p> <p style=bo

คุณสมบัติ padding-bottom คุณสมบัติ padding-bottom ระบุ padding ด้านล่างขององค์ประกอบ ตั้งค่า padding ด้านล่าง (space) รับค่าเป็นความยาวหรือเปอร์เซ็นต์ ตัวอย่าง <html> <head> </head> <body> <p style=padding-bottom: 10px; border:1px solid red;> This is a

คุณสมบัติ padding-top คุณสมบัติ padding-top ระบุ padding ด้านบนขององค์ประกอบ ตั้งค่า padding ด้านบน รับค่าเป็นความยาวหรือเปอร์เซ็นต์ ตัวอย่าง <html> <head> </head> <body> <p style=padding-top: 10px; border:1px solid red;> This is a paragraph with a spec

คุณสมบัติ margin (Shorthand) คุณสมบัติ margin กำหนดพื้นที่รอบองค์ประกอบ HTML สามารถใช้ค่าลบได้เพื่อทับซ้อนเนื้อหา ระบุ shorthand property สำหรับตั้งค่า margin ทั้งหมดในการประกาศเดียว ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อกำหนด margins: <html> <head> </head> <body> <p

คุณสมบัติ border-style: outset เพื่อกำหนดขอบแบบ outset ด้วย CSS ให้ใช้คุณสมบัติ border-style ด้วยค่า outset ตัวอย่าง <html> <head> </head> <body> <p style=border-width:4px; border-style:none;> This is a border with none width. </p> <p style

คุณสมบัติ border-bottom-style คุณสมบัติ border-bottom-style ใช้เปลี่ยนสไตล์ของขอบล่าง ลองรันโค้ดต่อไปนี้เพื่อนำ border-bottom-style property ไปใช้: ตัวอย่าง <html> <head> </head> <body> <p style=border-width:4px; border-bottom-style:dashed;> This is dem

คุณสมบัติ border-bottom-width คุณสมบัติ border-bottom-width ใช้เปลี่ยนความกว้างของขอบล่าง ลองรันโค้ดต่อไปนี้เพื่อนำ border-bottom-width property ไปใช้: ตัวอย่าง <html> <head> </head> <body> <p style=border-bottom-width:6px; border-style:solid;> This is

คุณสมบัติ border-bottom-color คุณสมบัติ border-bottom-color ใช้เปลี่ยนสีของขอบล่าง ลองรันโค้ดต่อไปนี้เพื่อนำ border-bottom-color property ไปใช้: ตัวอย่าง <html> <head> <style> p.demo { border: 4px solid; border-bottom-color: #FF0000; } </st

คุณสมบัติ border-top-color คุณสมบัติ border-top-color ใช้เปลี่ยนสีของขอบบน ลองรันโค้ดต่อไปนี้เพื่อนำ border-top-color property ไปใช้: ตัวอย่าง <html> <head> <style> p.demo { border: 3px solid; border-top-color: #FF0000; } </style> <

คุณสมบัติ border-right-style คุณสมบัติ border-right-style ใช้เปลี่ยนสไตล์ของขอบขวา ลองรันโค้ดต่อไปนี้เพื่อนำ border-right-style property ไปใช้: ตัวอย่าง <html> <head> </head> <body> <p style=border-width:4px; border-right-style:dashed;> This is demo con

คุณสมบัติ border-bottom-width คุณสมบัติ border-bottom-width ใช้เปลี่ยนความกว้างของขอบล่าง ลองรันโค้ดต่อไปนี้เพื่อนำ border-bottom-width property ไปใช้: ตัวอย่าง <html> <head> </head> <body> <p style=border-bottom-width:6px; border-style:solid;> This is

คุณสมบัติ border-color คุณสมบัติ border-color ระบุสีของขอบ ลองรันโค้ดต่อไปนี้เพื่อนำ border-color property ไปใช้: ตัวอย่าง <html> <head> <style> p.demo { border: 2px dashed; border-color: #800000; } </style> </head> <body>

คุณสมบัติ border-right-width คุณสมบัติ border-right-width ใช้เปลี่ยนความกว้างของขอบขวา ลองรันโค้ดต่อไปนี้เพื่อนำ border-right-width property ไปใช้: ตัวอย่าง <html> <head> </head> <body> <p style=border-right-width:6px; border-style:solid;> This is demo

คุณสมบัติ border-width คุณสมบัติ border-width ให้คุณกำหนดความกว้างของขอบองค์ประกอบ ค่าของคุณสมบัตินี้อาจเป็นความยาวใน px, pt, cm หรือตั้งค่าเป็น thin, medium หรือ thick ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อกำหนดความกว้างขอบด้วย CSS: <html> <head> </head> <body> <p st

คุณสมบัติ margin-right คุณสมบัติ margin-right ใช้กำหนด margin ด้านขวาขององค์ประกอบ รับค่าเป็นความยาว, เปอร์เซ็นต์, หรือ auto ลองรันโค้ดต่อไปนี้เพื่อกำหนด margin ขวา: ตัวอย่าง <html> <head> </head> <body> <p style=margin-right: 10px; border:2px solid red;>

คุณสมบัติ border-left-color คุณสมบัติ border-left-color ใช้เปลี่ยนสีของขอบซ้าย ลองรันโค้ดต่อไปนี้เพื่อนำ border-left-color property ไปใช้: ตัวอย่าง <html> <head> <style> p.demo { border: 3px solid; border-left-color: #FF0000; } </style>

คุณสมบัติ border-top-width คุณสมบัติ border-top-width ใช้เปลี่ยนความกว้างของขอบบน ลองรันโค้ดต่อไปนี้เพื่อนำ border-top-width property ไปใช้: ตัวอย่าง <html> <head> </head> <body> <p style=border-top-width:6px; border-style:solid;> This is demo content.

คุณสมบัติ border-left-color คุณสมบัติ border-left-color ใช้เปลี่ยนสีของขอบซ้าย ลองรันโค้ดต่อไปนี้เพื่อนำ border-left-color property ไปใช้: ตัวอย่าง <html> <head> <style> p.demo { border: 4px solid; border-left-color: #FF0000; } </style>

คุณสมบัติ border-style เพื่อกำหนดสไตล์ของขอบ ให้ใช้คุณสมบัติ border-style คุณสมบัติ border-style ให้คุณเลือกสไตล์ขอบได้ดังนี้: none: ไม่มีขอบ solid: ขอบเป็นเส้นทึบเดียว dotted: ขอบเป็นจุดๆ dashed: ขอบเป็นขีดขึงสั้นๆ double: ขอบเป็นสองเส้นทึบ groove: ขอบดูเหมือนถูกแกะสลักเข้าไปในหน้า ridge: ขอบดูเห