Table border-radius

Question

How to set a border-radius for a table. Read a lot of information about this, but nothing concrete.

<table id="table-prices"> 
    <tr>
      <td></td>
      <td colspan="2" class="table-main">Длина</td>
    </tr>
    <tr>
      <td>Ширина</td>
      <td>190 см</td>
      <td>200 см</td>
    </tr>
    <tr>
      <td>80 см</td>
      <td>5496</td>
      <td>5496</td>
    </tr>
    <tr>
      <td>140 см</td>
      <td>5496</td>
      <td>5496</td>
    </tr>
    <tr>
      <td colspan="3">Цены указаны в грн.</td>
    </tr>
  </table>

table {
 border: 1px solid #f00;
 border-radius: 10px;
 border-collapse: separate; 
 border-spacing: 0;
}
td {
 border: 1px solid #f00;
}

Almost done. But after border of table the angles are displaying. When I seting the owerflow-hiding - the grid inside table is lost

Mr. Alien · Accepted Answer · 2014-04-16T13:27:35.383

3

If you are using border-collapse: collapse; than border-radius won't work, for example

table {
    border: 1px solid #f00;
    border-radius: 10px;
}

Demo
(The other table is using border-collapse: collapse; and hence border-radius fails)

It may happen that most of the users use CSS Reset Stylesheet, and it uses the snippet below..

table {
    border-collapse: collapse;
    border-spacing: 0;
}

So it fails, inorder to override that for a particular table you need to use

table.class_name {
    border-collapse: separate; /* Overriding collapsed border */
    border-spacing: 0;
}

Where GCyrillus already pointed you about the spacing, but he missed out the separate value for the border-collapse property.

edited Apr 16 '14 at 13:27

answered Apr 16 '14 at 13:17

Mr. Alien

153,751
34
298
278

2

Great note about border collapse, never knew that. – Rob Quincey Apr 16 '14 at 13:18
It works, but in example the table is whith out grid, when i set to td a border - the table looks terribly(becouse it haven't a border-collapse) – Barns Apr 16 '14 at 13:46
@Barns I already gave you the solution for that as well – Mr. Alien Apr 16 '14 at 13:47
@Mr. Alien thx, perhaps I dont understand something – Barns Apr 16 '14 at 13:51

score 0 · Answer 2 · answered Apr 16 '14 at 13:20

0

to collapse table borders and still have access to border-radius, you should set border-spacing:0; instead of border-collapse:collapse;

answered Apr 16 '14 at 13:20

G-Cyrillus

101,410
14
105
129

Table border-radius

2 Answers2