Border-Radius on <Th>. No Border Rounding

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 on th. No border rounding

Change border-collapse:collapse to border-collapse:separate on the <table>.

You should also add support for browsers which are not at the newwest version:

-moz-border-radius: 7px;
-o-border-radius: 7px;
-ms-border-radius: 7px;
-webkit-border-radius: 7px;

Border-radius without rounding

CSS triangles to the rescue:

div.cutCorner{    height: 200px;    background: pink;    position: relative;}
div.cutCorner:before {    content: '';    position: absolute;    top: 0;     right: 0;    border-top: 50px solid white;    border-left: 50px solid pink;}

<div class="cutCorner"></div>

Border radius of table not working due to border-collapse property

If your intention is to not see any spacing between the content background and the border, then simply remove the border-collapse and add border-spacing: 0. border-spacing: 0 will not affect the border radius at all and it will also give you the results of no space between the border and the inner content.

In searching it seems there are some anomalies with using collapse and radius together. There are also some work arounds where you use psuedo tags on the tables children specifically to get a radius to work, but why waste all that time when you can just remove the space between the border and its inner content using border-spacing which works well with border-radius

EDIT: By using psuedo selectors along with border-space: 0 you can achieve a more pronounced border radius.

We want to target each td element that borders the edge of the table element.
table tr td:first-of-type and table tr td:last of type to get the left and right sides. Then we target each subsequent first and last child to get the corners. Lastly, if this is a dynamic table and you will have more than two data tables located in the table, add td:not(:first-child):not(:last-child) on each first and last of type.

I don't get the look I want which is the grey sections to go to the very edge of the table.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

table {
  /*add border-spacing: 0     instead of     border-collapse: collapse*/
  border-spacing: 0;
  margin: 25px 0;
  width: 50%;
  font-size: 1.4rem;
  min-width: 400px;
  /*margin is just for demo*/
  margin: 20px 20px;
}

/* Start psuedo child tags here, targeting each data elements relevant corners and sides */

table tr td:first-of-type {
   border-left: 1px solid #c3c3c3;
}

table tr td:last-of-type {
   border-right: 1px solid #c3c3c3;
}

/* :not(:first-child):not(:last-child)
This will get any potential data tables that are added 
that are not sides or corners however, they are border 
data tables on top or bottom */    

table tr:first-of-type td:not(:first-child):not(:last-child){
  border-top: 1px solid #c3c3c3;
}

table tr:last-of-type td:not(:first-child):not(:last-child){
  border-bottom: 1px solid #c3c3c3;
}

table tr:first-of-type td:first-child {
    border-top: 1px solid #c3c3c3;
    border-top-left-radius: 5px;
}

table tr:first-of-type td:last-child {
    border-top: 1px solid #c3c3c3;
    border-top-right-radius: 5px;
}

table tr:last-of-type td:last-child {
    border-right: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
    border-bottom-right-radius: 5px;
}

table tr:last-of-type td:first-child {
    border-left: 1px solid #c3c3c3;
    border-bottom:  1px solid #c3c3c3;
    border-bottom-left-radius: 5px;
}

/* End Psuedo tags here */

table tr {
  border-bottom: solid 1px #d1d1d1;
}

table tr:nth-child(odd) {
  background-color: #eee;
}

table td {
  padding: 10px 15px;
}

table td:first-of-type {
  font-weight: 600;
}

<div id="table">
  <table>
    <tbody>
      <tr>
        <td>Application</td>
        <td>here is some data</td>
        <td>Natural gas & LPG</td>
      </tr>
      <tr>
        <td>Standards</td>
        <td>some data in between</td>
        <td>BS EN ISO 9001:2008 - EN 331:1998</td>
      </tr>
      <tr>
        <td>Connection</td>
        <td>some data in between</td>
        <td>BSP Taper F</td>
      </tr>
      <tr>
        <td>more tables</td>
        <td>some data in between</td>
        <td>more data</td>
      </tr>
      <tr>
        <td>some more data still</td>
        <td>some data in between</td>
        <td>and yet more about this data</td>
      </tr>
      <tr>
        <td>Finish</td>
        <td>Plated</td>
        <td>Plated too</td>
      </tr>
    </tbody>
  </table>
</div>

Why td border-radius is applied to content but not the border

You're not allowing the borders to be separate from one another.

You have border-collapse: collapse as part of the CSS you're getting via JSFiddle. What that tells the browser is that these borders HAVE to touch. You don't want that, obviously.

So, if you add this to your CSS, it'll solve it:

table {
  border-collapse: separate;
}

You'll probably want to target that with a bit more specificity than I provided there, but that's the general idea. If you're rounding borders on table cells, allow them to separate from one another.

Link to JSFiddle example

Of course, different browsers and interpreters will have different style rules for their tables (just like they do for p blockquote and other elements). So in some instances it'll work out of the box when the default border-collapse property is separate. I have no clue if modern IE still has that as its default, but I know that IE 6-8 did, just as an example.

Rounded border without border-radius

Found something related. Reference - LINK

.b1,.b2,.b3,.b4 {  font-size: 1px;  overflow: hidden;  display: block;}
.b1 {  height: 1px;  background: #888;  margin: 0 5px;}
.b2 {  height: 1px;  border-right: 2px solid #888;  border-left: 2px solid #888;  margin: 0 3px;}
.b3 {  height: 1px;  border-right: 1px solid #888;  border-left: 1px solid #888;  margin: 0 2px;}
.b4 {  height: 2px;  border-right: 1px solid #888;  border-left: 1px solid #888;  margin: 0 1px;}
.contentb {  border-right: 1px solid #888;  border-left: 1px solid #888;}
.contentb div {  margin-left: 5px;}

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><div class="contentb">  <div>Round Border!!</div></div><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

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.

How can I get CSS rounded corners without rounding the border line?

.inner {  background:red;  border-radius:5px;  width:100px;  height:100px;}
.wrapper {  display:inline-block;  border-bottom:1px solid #000;}

<div class="wrapper">  <div class="inner"></div>  </div>

How to put round borders on a TH without getting the sharp corner?

It's a matter of border pixels vs. corner pixels. In this case, increasing the border to 2px fixes this issue:

.expense-table-pink {    width:100%;     background-color: #f9ecee;    border: 2px solid #bb1133;     border-collapse: separate;     border-spacing: 0;     border-radius: 6px;    -moz-border-radius:6px;    -webkit-border-radius:6px;        font-weight: normal;}

<table border="0" cellspacing="0" cellpadding="0" class="expense-table-pink"><thead>    <tr style="background-color: #bb1133;">        <th>aaa</th>        <th>bbb</th>        <th>ccc</th>    </tr></thead><tbody>    <tr>        <td>aaa</td>        <td>bbb</td>        <td>ccc</td>    </tr></tbody></table>

Using CSS border-radius (rounded corners), how can we prevent the rounded corners from disappearing if the image is scaled down (max width/height)?

just add border radius in anchor tag too

<a style="border-radius:20%" > img </a>

---

Related Topics