Style Table border with border-style
The border-style property allows you to define different styles for table borders. The property contains different border styling including solid, dashed, dotted, double, groove, ridge, inset, outset, none, and hidden.
Example: Illustration of the Styling the Table border with border-style.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Table using border-style</title> <style> body { font-family: Arial, Helvetica, sans-serif; } h1, h3 { text-align: center; color: green; } table { width: 100%; border: 1px solid #100808; border-radius: 12px; border-color: #2df804; } th, td { text-align: center; padding: 10px; background-color: rgb(181, 216, 181); border-radius: 40px; border-style: dotted; border-color: #f80404; } </style> </head> <body> <h1>w3wiki</h1> <h3> HTML Table using border-style </h3> <table> <thead> <tr> <th>Name</th> <th>Class</th> <th> Roll No </th> </tr> </thead> <tbody> <tr> <td>Mahima</td> <td>10</td> <td>1</td> </tr> <tr> <td>Krishn</td> <td>8</td> <td>3</td> </tr> <tr> <td>Shivika</td> <td>8</td> <td>5</td> </tr> </tbody> </table> </body> </html> |
Output:
HTML Table Borders
HTML Table Borders define the visible lines around cells and the overall table. They help in creating clear distinctions between various sections of the table, making it easier to understand and show information clearly. This attribute allows you to control the border’s style, color, and width, for the visual presentation of your table.