Html - Border radius not applied after use in the parent class

Jesus
July 22, 2023
111 views
0 votes
2 Answers

I have this simple HTML table using Bootstrap V5

.reasonCode-table th, .reasonCode-table td {
     padding: 8px;
     border: 2px solid #7a7878;
     border-radius: 6px;
}
 .reasonCode-table__title {
     text-align: center;
}
 .reasonCode-table__items {
     vertical-align: middle;
     text-align: center;
}
 .reasonCode-table thead th {
     border-top: none;
     border-right: none;
     border-left: none;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table reasonCode-table">
    <tbody>
        <tr>
            <td class="col-md-1 reasonCode-table__items">F123</td>
            <td class="col-md-2 reasonCode-table__items">X987Y</td>
            <td class="col-md-9 last-column">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Phasellus facilisis, urna eget lacinia lacinia, mauris quam
                gravida elit.
            </td>
        </tr>
        <tr>
            <td class="reasonCode-table__items">G456</td>
            <td class="reasonCode-table__items">Z654W</td>
            <td class="last-column">
                Nullam fringilla consectetur nunc, sit amet tincidunt eros
                congue ut.
            </td>
        </tr>
        <tr>
            <td class="reasonCode-table__items">H789</td>
            <td class="reasonCode-table__items">P123Q</td>
            <td class="last-column">
                Fusce vel dolor vel odio volutpat laoreet eget eu elit.
            </td>
        </tr>
        <tr>
            <td class="reasonCode-table__items">J012</td>
            <td class="reasonCode-table__items">L567M</td>
            <td class="last-column" colspan="2">
                Sed id nunc sit amet lectus feugiat fermentum.
            </td>
        </tr>
        <tr>
            <td class="reasonCode-table__items">K345</td>
            <td class="reasonCode-table__items">H789K</td>
            <td class="last-column">
                Mauris hendrerit bibendum mi, in tincidunt nisi dapibus at.
            </td>
        </tr>
    </tbody>
</table>

If you try to run this snippet you noticed that the table has no border-radius for some reason.

I tried adding to the parent .reasonCode-table. Also, I tried wrapping everything in a new <div>, but it does not work; how can I achieve this?

Regards

Answers

Try adding inline style to the <table> tag so your code should look like


                                    <!-- whatever css unit you like -->
<table class="table reasonCode-table" style="border-radius:11.36rem;">
    <tbody>
        <tr>
            <td class="col-md-1 reasonCode-table__items">F123</td>
            <td class="col-md-2 reasonCode-table__items">X987Y</td>
            <td class="col-md-9 last-column">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Phasellus facilisis, urna eget lacinia lacinia, mauris quam
                gravida elit.
            </td>
        </tr> 
        <!--- rest of the code -->

I think that the radius is not applied because of specifity issue but inline style have highest specifity

or you can try adding `!important` at the end of your style rule before semicolon `;`

e.g.

.your__class_name{
  border-radius:1.56rem !important;
  //rest of the styles
}

Include the border-collapse: ... ; CSS property on the table itself

The border-collapse CSS property sets whether cells inside a have shared or separate borders.

.reasonCode-table {
    border-collapse: separate;
}

/* ----- */

.reasonCode-table th, .reasonCode-table td {
     padding: 8px;
     border: 2px solid #7a7878;
     border-radius: 6px;
}
 .reasonCode-table__title {
     text-align: center;
}
 .reasonCode-table__items {
     vertical-align: middle;
     text-align: center;
}
 .reasonCode-table thead th {
     border-top: none;
     border-right: none;
     border-left: none;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table reasonCode-table">
    <tbody>
        <tr>
            <td class="col-md-1 reasonCode-table__items">F123</td>
            <td class="col-md-2 reasonCode-table__items">X987Y</td>
            <td class="col-md-9 last-column">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Phasellus facilisis, urna eget lacinia lacinia, mauris quam
                gravida elit.
            </td>
        </tr>
        <tr>
            <td class="reasonCode-table__items">G456</td>
            <td class="reasonCode-table__items">Z654W</td>
            <td class="last-column">
                Nullam fringilla consectetur nunc, sit amet tincidunt eros
                congue ut.
            </td>
        </tr>
        <tr>
            <td class="reasonCode-table__items">H789</td>
            <td class="reasonCode-table__items">P123Q</td>
            <td class="last-column">
                Fusce vel dolor vel odio volutpat laoreet eget eu elit.
            </td>
        </tr>
        <tr>
            <td class="reasonCode-table__items">J012</td>
            <td class="reasonCode-table__items">L567M</td>
            <td class="last-column" colspan="2">
                Sed id nunc sit amet lectus feugiat fermentum.
            </td>
        </tr>
        <tr>
            <td class="reasonCode-table__items">K345</td>
            <td class="reasonCode-table__items">H789K</td>
            <td class="last-column">
                Mauris hendrerit bibendum mi, in tincidunt nisi dapibus at.
            </td>
        </tr>
    </tbody>
</table>

You can also use this if you want the border-radius to apply to only the table itself and not the individual cells:

.reasonCode-table {
     border-collapse: separate;
     padding: 8px;
     border: 2px solid #7a7878;
     border-radius: 6px;
}

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

Source: https://unused-css.com/blog/css-rounded-table-corners/

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Border radius not applied after use in the parent class

Answers

or you can try adding !important at the end of your style rule before semicolon ;

or you can try adding `!important` at the end of your style rule before semicolon `;`