如何使用 CSS 删除底部边框？

Question

I'm using bootstrap and I have adapted the accordion to a table, it works perfectly except the icon when "toggled open" display a border-bottom which I would like to remove. It is probably something inherit somewhere but I cannot figure it out.

Problem:

When collapsed it works fine:

Here is the table code:

<!-- language: lang-css -->

    .accordion-line-button {
      padding: 0;
      width: auto;
      border: none;
    }

<!-- language: lang-html -->

    <table class="accordion" id="accordionExample">
      <tr class="accordion-item">
        <td class="accordion-header" id="heading1">
          <button class="accordion-button accordion-line-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1"></button>
        </td>
        <td class="accord">
          Question
        </td>
      </tr>
      <tr>
        <td colspan="2" class="accordion-collapse collapse" id="collapse1" aria-labelledby="heading1" data-bs-parent="#accordionExample">
          <div class="accordion-body">Answer
          </div>
        </td>
      </tr>
    </table>

Here a link to the bin . I'm using a template which I've included and it is the problem, there is something that is inheriting that I cannot figure it out.

Thanks for the help

Answer 1

It's not a border property but rather box-shadow that is set on the button. Kindly use below code.

.accordion-line-button {
  box-shadow: none !important;
}