Table's border-radius does not function as expected

HtmlCssHtml Table

Html Problem Overview

I want to add a border radius around the entire table. But the following code is not working in both the latest versions of Firefox and Google Chrome.

table {
  border-spacing: 0;
  width: 600px;
  margin: 30px;
  border: 1px solid #CCCCCC;
  border-radius: 6px 6px 6px 6px;
  -moz-border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px;
  box-shadow: 0 1px 1px #CCCCCC;
}

table th:first-child {
  border-radius: 6px 0 0 0;
  -moz-border-radius: 6px 0 0 0;
  -webkit-border-radius: 6px 0 0 0;
}

table th:last-child {
  border-radius: 0 6px 0 0;
  -moz-border-radius: 0 6px 0 0;
  -webkit-border-radius: 0 6px 0 0;
}

table td:first-child,
.bordered th:first-child {
  border-left: medium none;
}

table th {
  background-color: #DCE9F9;
  background-image: -moz-linear-gradient(center top, #F8F8F8, #ECECEC);
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#F8F8F8), to(#ECECEC), color-stop(.4, #F8F8F8));
  border-top: medium none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

table td,
table th {
  border-left: 1px solid #CCCCCC;
  border-top: 1px solid #CCCCCC;
  padding: 10px;
  text-align: left;
}


<table class="bordered">
  <thead>
    <tr>
      <th><label>Labels</label></th>
      <th><label>Labels</label></th>
      <th><label>Labels</label></th>
      <th><label>Labels</label></th>
      <th><label>Labels</label></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><label>Value</label></td>
      <td><label>Value</label></td>
      <td><label>Value</label></td>
      <td><label>Value</label></td>
      <td><label>Value</label></td>
    </tr>
  </tbody>
</table>

JSFiddle

Html Solutions

Solution 1 - Html

border-collapse: separate !important; worked.

Thanks.

HTML

<table class="bordered">
	<thead>
		<tr>
			<th><label>Labels</label></th>
			<th><label>Labels</label></th>
			<th><label>Labels</label></th>
			<th><label>Labels</label></th>
			<th><label>Labels</label></th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<td><label>Value</label></td>
			<td><label>Value</label></td>
			<td><label>Value</label></td>
			<td><label>Value</label></td>
			<td><label>Value</label></td>                            
		</tr>
	</tbody>                    
</table>

CSS

table {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 600px;
    margin: 30px;
}
.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
}
.bordered tr:hover {
    background: #ECECEC;    
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
.bordered td, .bordered th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}
.bordered th {
    background-color: #ECECEC;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#ECECEC));
    background-image: -webkit-linear-gradient(top, #F8F8F8, #ECECEC);
    background-image: -moz-linear-gradient(top, #F8F8F8, #ECECEC);    
    background-image: linear-gradient(top, #F8F8F8, #ECECEC);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}
.bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}
.bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}
.bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
.bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}
.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

jsFiddle

Solution 2 - Html

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:

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.

Solution 3 - Html

This is my solution using the wrapper, just removing border-collapse might not be helpful always, because you might want to have borders.

.wrapper {
  overflow: auto;
  border-radius: 6px;
  border: 1px solid red;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  border-style: hidden;

  width:100%;
  max-width: 100%;
}

th, td {
  padding: 10px;
  border: 1px solid #CCCCCC;
}


<div class="wrapper">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Foo Bar boo</td>
        <td>Lipsum</td>
        <td>Beehuum Doh</td>
      </tr>
      <tr>
        <td>Dolor sit</td>
        <td>ahmad</td>
        <td>Polymorphism</td>
      </tr>
      <tr>
        <td>Kerbalium</td>
        <td>Caton, gookame kyak</td>
        <td>Corona Premium Beer</td>
      </tr>
    </tbody>
  </table>  
</div>

This article helped: https://css-tricks.com/table-borders-inside/

Solution 4 - Html

A note to this old question:

My reset.css had set border-spacing: 0, causing the corners to get cut off. I had to set it to 3px for my radius to work properly (value will depend on the radius in question).

Solution 5 - Html

Just add overflow:hidden to the table with border-radius.

.tablewithradius {
  overflow:hidden ;
  border-radius: 15px;
}

Solution 6 - Html

<div class="leads-search-table">
                    <div class="row col-md-6 col-md-offset-2 custyle">
                    <table class="table custab bordered">
                    <thead>

                        <tr>
                            <th>ID</th>
                            <th>Title</th>
                            <th>Parent ID</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                            <tr>
                                <td>1</td>
                                <td>News</td>
                                <td>News Cate</td>
                                <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Products</td>
                                <td>Main Products</td>
                                <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Blogs</td>
                                <td>Parent Blogs</td>
                                <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td>
                            </tr>
                    </table>
                    </div>
                </div>

Css

.custab{
    border: 1px solid #ccc;
    margin: 5% 0;
    transition: 0.5s;
    background-color: #fff;
    -webkit-border-radius:4px;
    border-radius: 4px;
    border-collapse: separate;
}

Solution 7 - Html

No need to worry..Just add overflow: hidden; and then apply border radius. Border radius will be applied to all the four sides.

Solution 8 - Html

To use border radius I have a border radius of 20px in the table, and then put the border radius on the first child of the table header (th) and the last child of the table header.

table {
  border-collapse: collapse;
  border-radius:20px;
  padding: 10px;
}

table th:first-child {
  /* border-radius = top left, top right, bottom right, bottom left */
    border-radius: 20px 0 0 0; /* curves the top left */
    padding-left: 15px;
}

table th:last-child {
    border-radius: 0 20px 0 0; /* curves the top right */
}

This however will not work if this is done with table data (td) because it will add a curve onto each table row. This is not a problem if you only have 2 rows in your table but any additional ones will add curves onto the inner rows too. You only want these curves on the outside of the table. So for this, add an id to your last row. Then you can apply the curves to them.

/* curves the first tableData in the last row */

#lastRow td:first-child {
    border-radius: 0 0 0 20px; /* bottom left curve */
}

/* curves the last tableData in the last row */

#lastRow td:last-child {
    border-radius: 0 0 20px 0; /* bottom right curve */
}
Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Html Table Solutions

Previous Solution:

Compiling and Running Java Code in Sublime Text 2

JavaCompilationSublimetext2

Next Solution:

Multiple GitHub Pages and custom domains via DNS

GithubDnsSubdomainCnameGithub Pages

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTapas BoseView Question on Stackoverflow
Solution 1 - HtmlTapas BoseView Answer on Stackoverflow
Solution 2 - HtmlFelipeAlsView Answer on Stackoverflow
Solution 3 - HtmlnotgiorgiView Answer on Stackoverflow
Solution 4 - HtmlMackanView Answer on Stackoverflow
Solution 5 - HtmlSimoView Answer on Stackoverflow
Solution 6 - HtmlBipon BiswasView Answer on Stackoverflow
Solution 7 - HtmlAyimen LatheefView Answer on Stackoverflow
Solution 8 - HtmlimatworkView Answer on Stackoverflow