Как сделать таблицу со скруглёнными краями с помощью Bootstrap 4?

Question

[Baoo]

Имеется вот такая таблица

<div class="table-responsive card">
    <table
    class="table table-sm align-middle"
    data-toggle="table"
    data-cookie="true"
    data-cookie-id-table="scripts"
    data-cookie-storage="localStorage"
    data-locale="ru-RU"
    data-sortable="true"
    data-search="true"
    data-pagination="true"
    data-pagination-v-align="top"
    data-page-list="[10, 20, 50, 100, all]"
    data-show-columns="true">
        <thead class="align-middle">
            <tr>
                <th data-sortable="true">Название</th>
                <th>Категория</th>
                <th>Описание</th>
            </tr>
        </thead>
        <tbody class="align-middle">
            {% for script in scripts %}
                <tr>
                    <td>
                        {{ script.name }}
                    </td>
                    <td>
                        {{ script.category }}
                    </td>
                    <td>
                        {{ script.description|default_if_none:"" }}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

Нужно сделать ей закругленные края. Обернул её в div.card, края закруглились, но из-за использования bootstrap-table (атрибуты, начинающиеся на data-), строка поиска, пагинация и пр. тоже оборачиваются в эту границу, т.к. являются частью таблицы.
Как можно скруглить края только у таблицы, а вспомогательные элементы не включать в неё?

Answer 1

[Сергей delphinpro]

Стилизовать саму таблицу дополнительными стилями. Бутстрап вас не ограничивает в их использовании.
https://unused-css.com/blog/css-rounded-table-corners/