Thuộc tính border trong CSS được dùng để định nghĩa đường viền cho một phần tử.
Cú pháp
Selector { border: /*giá trị*/ }
Ví dụ
Các ví dụ sau minh họa thuộc tính 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>
Kết quả
Đoạn mã trên cho kết quả sau:
Ví dụ khác
<!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>Xếp hạng</h2> <table> <caption>Xếp hạng cầu thủ ODI nam</caption> <tr> <th>Cầu thủ</th> <th>Xếp hạng</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">Thg9 2019</td> </tr> </table> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
