I am creating a table and I want only the top of my table to have the effect of the property border-radius
, that is, both the top left and right corners. I don't understand why the indicated property is not being applied. I suspect it's because of the different borders I defined. What could you change to achieve what you want?
HTML:
<table>
<tr><th>Nombre</th>
<th>Localidad</th>
<th>Años</th></tr>
<tr>
<td>Daniel</td>
<td>Colorado</td>
<td>27</td>
</tr>
<tr>
<td>John</td>
<td>Maine</td>
<td>35</td>
</tr>
<tr>
<td>George</td>
<td>Rhode Island</td>
<td>57</td>
</tr>
<tr>
<td>Karen</td>
<td>Washington DC</td>
<td>35</td>
</tr>
<tr>
<td>Bob</td>
<td>Pennsylvania</td>
<td>23</td>
</tr>
<tr>
<td>Gregor</td>
<td>Virginia</td>
<td>20</td>
</tr>
<tr>
<td>Derek</td>
<td>Minnesota</td>
<td>26</td>
</tr>
<tr>
<td>Rosa</td>
<td>Arizona</td>
<td>24</td>
</tr>
<tr>
<td>Jessie</td>
<td>Connecticut</td>
<td>41</td>
</tr>
<tr>
<td>Emma</td>
<td>Michigan</td>
<td>36</td>
</tr>
</table>
CSS:
table {
text-align: left;
width: 75%;
background-color: #f4f8f9;
background-image: linear-gradient(90deg, #f4f8f9 0%, #5991da 100%);
border-collapse: collapse;
border-radius: 15px 15px 0 0;
}
table tr th {
background-color: #192D57;
color: #fff;
border: 2px solid #0d475c;
}
th, td {
padding: 20px;
border: 2px solid #6383C8;
color: #323770;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: 600;
opacity: 0.8;
}
When using border-collapse the border-radius property does nothing, as you can see in the following link: https://css-tricks.com/almanac/properties/b/border-collapse/ , one option is to replace it with border- spacing: 0 and then making use of the childs specifically select the element whose vertex you want to round and finally apply the corresponding property.
Something like this might be useful: