html/css 表格中的边框半径

Question

I would like a rounded border on my table's outer border. However, it does not appear that anything that I am trying is working. Any advise would be appreciated. What is perhaps more odd is that the code seems to work when I 'run' in stackoverflow, but does not work on my actual source code. I'm not sure if that is because I'm using Hugo as a platform? All of my other border-radius functions seem to work...

RELEVANT CODE

 .table-bor { border: solid; border-width: 1px; border-color: $theme; padding: 50px 30px; margin-top: 50px; margin-bottom: 50px; margin-left: 30px; border-radius: 10px; } /* not relevant */ .title-borrow { text-align: right; color: $theme; font-size: 30pt; } /* I HAVE ALSO TRIED THE FOLLOWING BUT IT DID NOT WORK */ td:first-of-type { border-top-left-radius: 10px; } th:last-of-type { border-top-right-radius: 10px; } tr:last-of-type td:first-of-type { border-bottom-left-radius: 10px; } tr:last-of-type td:last-of-type { border-bottom-right-radius: 10px; } /* AND IN THE ACTUAL HTML CODE, I HAVE TRIED THE FOLLOWING INDIVIDUALLY */ <table style="border-radius: 10px !important"> <table style="border-radius: 10px"> /* in first tr & th */ <tr style="border-top-left-radius: 10px"> <th style="border-top-left-radius: 10px">

 <table class="table-bor"> <tr> <th class="title-borrow">Test</th> <td></td> </tr> <tr> <td class="calc-input">Amount of the loan ($):</td> <td><input id="amount" placeholder="$300 - $2,500" onclick="calculate(this);"></td> </tr> <!-- ... --> </table>

Answer 1

Check in your browsers inspector to see if something is overriding the style. As well your inspector should be able to show all of the css attributes being applied to any element so you can see what elements are actually being applied.