Rounded Table Corners CSS Only. One Two Three Four Five Seven Eight Nine
Rounded Table Corners CSS Only <html> <body> <p>Rounded Table Corners CSS Only.</p> <style> table { border-collapse: separate; border-spacing: 0; } th,td { padding: 8px 15px; border-right: 2px solid #000; border-bottom: 2px solid #000; } th:first-child, td:first-child { border-left: 2px solid #000; } th { background-color: #ddd; border-top: 2px solid #000; } th:first-child { border-top-left-radius: 8px; } th:last-child { border-top-right-radius: 8px; } tr:last-child td:first-child { border-bottom-left-radius: 8px; } tr:last-child td:last-child { border-bottom-right-radius: 8px; } </style> <table> <tr> <th>One</th> <th>Two</th> <th>Three</th> </tr> <tr> <td>Four</td> <td>Five</td> <td><img height="50" src="https://app.3schools.in/img/bg.png" width="80"></td> </tr> <tr> <td>Seven</td> <td>Eight</td> <td>Nine</td> </tr> </table> </body> </html> You may like these posts : 7 Comments Anonymous 11 May, 2024 2023-04-16T09:05:19+05:30 Nicely done! It is the best example so far. Reply Delete Anonymous 11 May, 2024 2023-04-16T09:05:19+05:30 Thanks! Reply Delete Anonymous 11 May, 2024 2023-04-16T09:05:19+05:30 This is really cool. Just what I was looking for... Anonymous 11 May, 2024 2023-04-16T09:05:19+05:30 Very. Seriously, amazing and very useful! What's the browser compatibility on this? Anonymous 11 May, 2024 2023-04-16T09:05:19+05:30 Looks awesome, imo. Great job! Reply Delete Reply Delete Anonymous 11 May, 2024 2023-04-16T09:05:19+05:30 Thank you so much. I learnt a lot from this! Reply Delete Anonymous 11 May, 2024 2023-04-16T09:05:19+05:30 You are a genius! Reply Delete Post a Comment
Rounded Table Corners CSS Only <html> <body> <p>Rounded Table Corners CSS Only.</p> <style> table { border-collapse: separate; border-spacing: 0; } th,td { padding: 8px 15px; border-right: 2px solid #000; border-bottom: 2px solid #000; } th:first-child, td:first-child { border-left: 2px solid #000; } th { background-color: #ddd; border-top: 2px solid #000; } th:first-child { border-top-left-radius: 8px; } th:last-child { border-top-right-radius: 8px; } tr:last-child td:first-child { border-bottom-left-radius: 8px; } tr:last-child td:last-child { border-bottom-right-radius: 8px; } </style> <table> <tr> <th>One</th> <th>Two</th> <th>Three</th> </tr> <tr> <td>Four</td> <td>Five</td> <td><img height="50" src="https://app.3schools.in/img/bg.png" width="80"></td> </tr> <tr> <td>Seven</td> <td>Eight</td> <td>Nine</td> </tr> </table> </body> </html>
You may like these posts :