คุณสมบัติ border ใน CSS ใช้สำหรับกำหนดขอบสำหรับองค์ประกอบ ไวยากรณ์ของคุณสมบัติ CSS border ดังนี้:
ไวยากรณ์
Selector { border: /*value*/ }
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS border:
<!DOCTYPE html> <html> <head> <style> table { margin: 1em; border: 3px double green; border-right-style: dashed; border-left-width: 17px; border-bottom-color: orange; } td { font-size: 24px; border-right-style: dotted; border-width: 3px; border-right-color: red; } </style> </head> <body> <table> <tr> <td>demo</td> <td>text</td> </tr> <tr> <td>goes</td> <td>here</td> </tr> </table> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
ตัวอย่างเพิ่มเติม
<!DOCTYPE html> <html> <head> <style> table { margin: auto; caption-side: bottom; border: 2px dashed black; } td { border: 2px solid midnightblue; text-align: center; } td[colspan] { box-shadow: inset 0 0 10px lightblue; text-align: center; } caption { font-size: 16px; font-weight: bold; } </style> </head> <body> <h2>Ranking</h2> <table> <caption>Men's ODI Player Ranking</caption> <tr> <th>Player</th> <th>Rank</th> </tr> <tr> <td>Virat Kohli</td> <td>1</td> </tr> <tr> <td>Rohit Sharma</td> <td>2</td> </tr> <tr> <td>Babar Azam</td> <td>3</td> </tr> <tr> <td>Ross Taylor</td> <td>4</td> </tr> <tr> <td colspan="2">Sept2019</td> </tr> </table> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
