Can HTML have collapsed borders for styling?

Issue:
I am trying to highlight the top and bottom border of items within an accordion when they have hovered state.

The issue is that I use the border-collapse: collapse statement to collapse borders that are adjacent. There the hover effects don’t resolve the wanted styling.

Below you will find the HTML and CSS:

HTML:

<table class="accordion-container">
        <tr class="accordionItem-container" v-for="(item, index) in state.topics" :key="index">
            <td class="accordionItem">
                <div class="accordionImage-container">
                    <img class="accordionImage" :src="item.img" alt="">
                </div>
                <div class="accordionCopy-container">
                    <BaseHeading class="accordionHeader">
                        <template #default>
                            <span class="mainHeader">{{ item.mainHeader }}</span>
                            <span class="subHeader">{{ item.subHeader }}</span>
                        </template>
                    </BaseHeading>
                </div>
            </td>
        </tr>
        <tr class="accordionItem-container" v-for="(item, index) in state.topics" :key="index">
            <td class="accordionItem">
                <div class="accordionImage-container">
                    <img class="accordionImage" :src="item.img" alt="">
                </div>
                <div class="accordionCopy-container">
                    <BaseHeading class="accordionHeader">
                        <template #default>
                            <span class="mainHeader">{{ item.mainHeader }}</span>
                            <span class="subHeader">{{ item.subHeader }}</span>
                        </template>
                    </BaseHeading>
                </div>
            </td>
        </tr>
    </table>

CSS:

<style scoped>
    .accordion-container {
        border-collapse: collapse;
        border-spacing: 0 4px;
    }
    .accordionItem-container {
        border: 4px solid #EBEEF0;
        border-left: none;
        border-right: none;
    }
    .accordionItem-container:hover {
        border: 4px solid #006366;
        border-left: none;
        border-right: none;
    }
    .accordionItem {
        display: flex;
        padding: 16px 0 20px 0;
        gap: 20px;
        align-items: center;
    }
    .accordionImage-container {
        width: 61px;
        height: 56px;
    }
    .accordionImage {
        border-radius: 12px;
        max-width: 100%;
        height: auto;
    }
    .accordionHeader {
        display: flex;
        flex-direction: column;
    }
    .mainHeader {
        font-weight: 400 !important;
    }
    .subHeader {
        font-weight: 300 !important;
        font-size: 16px;
    }

    @media screen and (max-width: 1024px) {
        .accordionImage-container {
            display: none;
        }
    }
</style>

Here is also a link to the jsfiddle: https://jsfiddle.net/MarquezTMoore/Lyb5ah7o/6/

I have tried using the outline property in the hover state however this add outline to all four sides…