How-to create rounded corners on Table Head only

Question

I would like to know how to create a rounded corners on a table head only?

Additional detail... I want to have a rouded head of the table the rest of the table is a rectangle just the first header row should have rounded corners.

yes border-radius but to no avail it works on divs but not on table headers — Astronaut, Mar 26 '12 at 14:27
`thead` element? `th` elements? The table's `caption`? A lot of different things can be called the table's header. — MetalFrog, Mar 26 '12 at 14:27
Asked before: http://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i — Frank van Wijk, Mar 26 '12 at 14:34
You should really give a bit more detail on what you are looking for. This is a bit ambiguous. — Andrew, Mar 26 '12 at 14:45

score 59 · Accepted Answer · answered Mar 26 '12 at 14:43

59

The problem is, that you need to make the certain inner elements round.

So you have to make for the first th and the last th round to get the wished solution.

table th:first-child{
  border-radius:10px 0 0 10px;
}

table th:last-child{
  border-radius:0 10px 10px 0;
}

answered Mar 26 '12 at 14:43

Sven Bieder

5,515
2
21
27

As a follow up how do i set the with so I have a thin header. – Astronaut Mar 26 '12 at 19:44
I'm a bit confused. When you are talking about thin I have the height in head, why you want to set the width? – Sven Bieder Mar 26 '12 at 19:45
1

sorry you are correct i was referring to width, i set my with to 20px but it does not do anything... – Astronaut Mar 27 '12 at 10:22
You can perhaps post the code of the general table you have made or set up a fiddle? That would make it easier. That it doesn't take the width could be in every cell. – Sven Bieder Mar 27 '12 at 12:50

score 3 · Answer 2 · answered Mar 26 '12 at 14:33

It would be easier to help you if we saw your code or at least the code that didn't work for you.

Anyway, this tutorial seems relevant to your question http://www.jeox.com/docs/manual/web/round_table_corners.html

EDIT: Or this one http://blog.jezmckean.com/css3-rounded-table-corners-no-images/

Bram Vanroy · Answer 3 · 2016-10-17T09:26:26.687

There are a number of options. It depends on what you really want to achieve visually.

But be sure that border-collapse is NOT set to collapse, because that will not work. For more information, see this mozilla link: https://developer.mozilla.org/en/CSS/border-radius

#uno,
#due th,
#tre th {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border: 1px solid black;
}
#tre td {
  border: 1px solid black;
}

<table id="uno" border="0">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

<br>

<table id="due" border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

<br>

<table id="tre" border="0">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

How-to create rounded corners on Table Head only

3 Answers3

Linked