border-Radius in table does not work CSS

Question

I’m trying to put a Radius border on my table so that the four tips of it are rounded. If I touch the tr/th/td border-Radius it will change the radius of the ballots and not only those of the table, which is my goal and if I change the radius of the table and this appears correctly. With the table marks that the radius decreased but the table does not follow this, follows an image to illustrate what I said:

CSS:

    .table-round-corner{
    margin-top: 15px;
    width: 100%;
    text-align: center;
    berder-radius: 25px;
    border: solid #ddd 1px;
    overflow:hidden;
}
table td{
    color: #aaa;
    background-color: white;
    padding: 5px;
    border: 1px solid #ddd;
}
table th{
    color: white;
    background-color: red;
    font-weight: normal;
    text-align: center;
    padding: 5px;
    font-size: 12px;
}

HTML:

                    <table class"table-round-corner">
                        <tr>
                            <th>ASDASD</th>
                            <th>ASDASDAS</th>
                            <th>ASDASD</th>
                        </tr>
                        <tr>
                            <td>ASDASD</td>
                            <td>34</td>
                            <td>R$ 00,00</td>
                        </tr>
                        <tr>
                            <td>ASDASDASD</td>
                            <td>00</td>
                            <td>R$ 00,00</td>
                        </tr>
                    </table>

Summary:

I need my table to have rounded ends.

Answer 1

Long live!

I think this is what you want:

.table-round-corner {
    margin-top: 15px;
    width: 100%;
    text-align: center;
    overflow:hidden;
    border-collapse:separate;
    border: solid #ccc 1px;
    -webkit-border-radius: 25px;
       -moz-border-radius: 25px;
            border-radius: 25px;
}


table td {
    color: #aaa;
    background-color: white;
    padding: 5px;
    border: 1px solid #ddd;
}

table th{
    color: white;
    background-color: red;
    font-weight: normal;
    text-align: center;
    padding: 5px;
    font-size: 12px;
}

<table class="table-round-corner" cellspacing="0">
  <tr>
    <th>ASDFASDF</th>
    <th>ASDFASDFASDFA</th>
    <th>ASDFASDF</th>
  </tr>
  <tr>
    <td>ASDFASDF</td>
    <td>654</td>
    <td>R$ 00,00</td>
  </tr>
  <tr>
    <td>SDFASDF</td>
    <td>45</td>
    <td>R$ 00,00</td>
  </tr>
</table>

Answer 2

Just apply on the table.

table {
  border: 2px solid #ccc;
  border-radius: 5px;
}

<table>
  <tr>
    <td>foo</td>
    <td>foo</td>
    <td>foo</td>
  </tr>
  <tr>
    <td>foo</td>
    <td>foo</td>
    <td>foo</td>
  </tr>
</table>

Since you are (apparently) using Bootstrap, you can try this way:

/* só para manter a tabela centralizada */
.panel {
  margin: 10px auto;
  max-width: 70% !important
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

<div class="panel panel-default">
  <table class="table table-bordered">
    <tr>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
    </tr>
  </table>
</div>

If it still doesn’t work it may be that some other rule is overriding the border-radius. In that case, you can try it this way:

.table {
   border-radius: 5px !important
}

!Mportant - Maujor

Answer 3

I don’t understand exactly what you want. Would that be?

HTML

<table class="borda-na-tabela">
<tr>
<th>ASDFASDF</th>
<th>ASDFASDFASDFA</th>
<th>ASDFASDF</th>
</tr>
<tr>
<td>ASDFASDF</td>
<td>654</td>
<td>R$ 00,00</td>
</tr>
<tr>
<td>SDFASDF</td>
<td>45</td>
<td>R$ 00,00</td>
</tr>
</table>

CSS

.borda-na-tabela {
    margin-top: 15px;
    width: 100%;
    text-align: center;
    overflow:hidden;
    border-collapse:separate;
    border: 3px solid red;
    border-radius: 50%;
}

table td {
    color: #aaa;
    background-color: white;
    padding: 5px;
    border: 1px solid #ddd;
}

table th{
    color: white;
    background-color: red;
    font-weight: normal;
    text-align: center;
    padding: 5px;
    font-size: 12px;
}

Jsfiddle