Breaking News: Grepper is joining You.com. Read the official announcement!

HTML Round Table Borders

Rakib answered on February 18, 2023 Popularity 9/10 Helpfulness 9/10

answer HTML Round Table Borders

related html table rounded corners

HTML Round Table Borders

Comment

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-radius: 10px;
}
</style>
</head>
<body>

<h2>Table With Rounded Borders</h2>

<p>Use the CSS border-radius property to add rounded corners to the borders.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Popularity 9/10 Helpfulness 9/10 Language html

Source: Grepper

Tags: html

Link to this answer
Share Copy Link

Contributed on Feb 18 2023

Rakib

0 Answers Avg Quality 2/10

Closely Related Answers

html table rounded corners

Comment

table {
  border-collapse: separate;
  border-spacing: 0;
}
table tr th,
table tr td {
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  padding: 5px;
}
table tr th:first-child,
table tr td:first-child {
  border-left: 1px solid #bbb;
}
table tr th {
  background: #eee;
  border-top: 1px solid #bbb;
  text-align: left;
}

/* top-left border-radius */
table tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

/* top-right border-radius */
table tr:first-child th:last-child {
  border-top-right-radius: 6px;
}

/* bottom-left border-radius */
table tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}

/* bottom-right border-radius */
table tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

Popularity 9/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: css html-table

Link to this answer
Share Copy Link

Contributed on Mar 08 2023

Bade_Mia

0 Answers Avg Quality 2/10

HTML Round Table Borders

Contents

More Related Answers

HTML Round Table Borders

Closely Related Answers

html table rounded corners

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.