Table's Border-Radius Does Not Function as Expected

Table's border-radius does not function as expected

It works, this is a problem with the tool used: normalized CSS by jsFiddle is causing the problem by hiding you the default of browsers...

See http://jsfiddle.net/XvdX9/5/

EDIT:
normalize.css stylesheet from jsFiddle adds the instruction border-collapse: collapse to all tables and it renders them completely differently in CSS2.1:

• The separated borders model
• The collapsing border model

Differences between the 2 models can be seen in this other fiddle: http://jsfiddle.net/XvdX9/11/ (with some transparencies on cells and an enormous border-radius on the top-left one, in order to see what happens on table vs its cells)

In the same CSS2.1 page about HTML tables, there are also explanations about what browsers should/could do with empty-cells in the separated borders model, the difference between border-style: none and border-style: hidden in the collapsing borders model, how width is calculated and which border should display if both table, row and cell elements define 3 different styles on the same border.

Border radius can't be applied to my HTML table

You can try this code..

#tbstud {        width:700px;    margin:50px auto;        border-collapse:collapse;    }    .column_heading {    background-color:#d9e5f0;    border-left:1px solid #ffffff;    border-radius:5px 5px 0 0;    color:#000;    font-weight:bold;    height:20px;    line-height:20px;    padding:10px;    text-align:center;  } .customer_row td {border-left:1px solid #ffffff;}  .customer_row td span{    display: block;    padding:15px;    background-color: #f5f7f9;  }    .customer_row {    border-bottom:1px solid #e5e9ee;    border-top:2px solid #fff;    color:#545454;    border-radius:5px;  }    .customer_row td:first-child span{ border-left:3px solid #2585fe;border-radius: 4px; }  .customer_row td:last-child span{border-radius: 4px;}  #tbstud .customer_row:nth-child(2) {    border-top:none;  }
  #tbstud .customer_row:last-child {    border-bottom:none;  }

<table id="tbstud">        <tr>            <th>Sr. No.</th>            <th class="column_heading">Roll No.</th>            <th class="column_heading">Name</th>            <th class="column_heading">Class</th>            <th class="column_heading">Address</th>        </tr>        <tr class="customer_row">            <td><span>1</span></td>            <td><span>101</span></td>            <td><span>Sam</span></td>            <td><span>MSc</span></td>            <td><span>Delhi</span></td>        </tr>        <tr class="customer_row">            <td><span>2</span></td>            <td><span>102</span></td>            <td><span>Amit</span></td>            <td><span>BCA</span></td>            <td><span>Mumbai</span></td>        </tr>        <tr class="customer_row">            <td><span>3</span></td>            <td><span>103</span></td>            <td><span>Rahul</span></td>            <td><span>BCA</span></td>            <td><span>Delhi</span></td>        </tr>        <tr class="customer_row">            <td><span>4</span></td>            <td><span>104</span></td>            <td><span>Neha</span></td>            <td><span>BA</span></td>            <td><span>Pune</span></td>        </tr>        <tr class="customer_row">            <td><span>5</span></td>            <td><span>105</span></td>            <td><span>Pooja</span></td>            <td><span>B.Tech.</span></td>            <td><span>Chandigarh</span></td>        </tr>    </table>

border-radius not working

To whomever may have this issue. My problem was border-collapse. It was set to:

border-collapse: collapse;

I set it to:

border-collapse: separate; 

and it fixed the issue.

The border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?

I figured it out. You just have to use some special selectors.

The problem with rounding the corners of the table was that the td elements didn't also become rounded. You can solve that by doing something like this:

table tr:last-child td:first-child {
    border: 2px solid orange;
    border-bottom-left-radius: 10px;
}
    
table tr:last-child td:last-child {
    border: 2px solid green;
    border-bottom-right-radius: 10px;
}

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

Border-radius property not working in outlook

border-radius property is not supported by outlook, as it uses MS-word template. we need to code for outlook too. Please find the below piece of code which will work for both outlook and browser or other email clients.

<td>
  <div>
    <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://example.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button →</center>
      </v:roundrect>
    <![endif]-->
    <a href="http://example.com" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">I am a button →</a>
  </div>
</td>

Applying border-radius to bootstrap 5 table

The border radius is being applied on the parent div - it's just overflowing.

Apply overflow:hidden to the table parent:

.tbl-container {
  width: 400px;
  margin-top: 10px;
  margin-left: 10px;
}

.bg-red {
  background-color: red;
  color: white;
}

.bdr {
  border-radius: 6px;
  overflow: hidden;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="tbl-container bdr"> <!-- <== overflow: hidden applied to parent -->
  <table class="table">
    <thead class="bg-red">
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

</div>

How can I set border-radius on table head in Bootstrap 5?

table {
 border-radius: 9px;
 overflow: hidden /* add this */
}

/* Or do this */

thead th:first-child {
 border-top-left-radius: 9px;
}

thead th:last-child {
 border-top-right-radius: 9px;
}

tbody tr:last-child :first-child {
 border-bottom-left-radius: 9px;
}

tbody tr:last-child :last-child {
 border-bottom-right-radius: 9px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<table class="table table-dark table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

---

Related Topics