Border-radius not working with table-element

It was built with some antique and old-tech code. Even Bootstrap is still in there 😱. The plan was to keep the HTML intact where possible and only change the styling using CSS. I have already worked on some other pages within this website and had to refactor and upgrade a lot of the code. Since I need to apply a redesign to the checkout page, I should be careful with what I change, as this page contains multiple layers, such as different views for logged-in and guest users. There are also several changes between languages and XHR requests that replace HTML parts of the page. As you can understand, any small mistake has a big impact on sales. While working on the checkout page, I ended up rewriting a lot of CSS and made some small changes to the HTML when needed, but I kept it as minimal as possible.

I’m not too worried about changing this checkout. With my 30 years of experience, I have a good understanding of the impact of the changes I’ve made. One thing that surprised me a little was the lack of customization options for tables. In this case, I needed to add a rounded border around a list of products that was rendered using a table. When I tried to add a CSS border-radius to it, at first, I didn’t see any effect, as I assumed the border-radius on the table element would just work. But after a little while, I discovered that the corners of the element looked a bit goofy. So, at that point, I decided to create a test file to figure out what was happening.

Building the table with border-radius

So, I started out with the code below, where I created a table and applied a border-radius to it, and it worked.

<table> <tbody><tr><td>text</td></tr></tbody> </table> <style> table { inline-size: 10rem; aspect-ratio: 1; border: .25rem solid royalblue; border-radius: 2rem; background-color: aquamarine; text-align: center; } </style>​​

​

So far, so good. However, there were gaps between the table rows at this point, so I needed to collapse the borders by using the CSS property border-collapse. From that moment on, the border-radius was no longer working, and my element looked like the one below.

<table> <tbody><tr><td>text</td></tr></tbody> </table> <style> table { inline-size: 10rem; aspect-ratio: 1; border: .25rem solid royalblue; border-radius: 2rem; border-collapse: collapse; background-color: aquamarine; text-align: center; } </style>​​

My solution

The border-radius on the background was still working, but the borders were squared off. As far as I am aware, there is no fix for this odd behavior. So, I did the only logical thing I could do—something I didn’t want to do—and added a div element around it to apply the border-radius to. What I ended up with is shown below.​

<div class="table-outer">
    <table>
        <tbody>
            <tr>
                <td>text</td>
            </tr>
        </tbody>
    </table>
</div>

<style>
    .table-outer {
        inline-size: 10rem;
        aspect-ratio: 1;
        border: .25rem solid royalblue;
        background-color: aquamarine;
        border-radius: 2rem;
    }

    table {
        width: 100%;
        height: 100%;
        text-align: center;
        border-collapse: collapse;
    }

</style>

Conclusion

For this project, I didn’t want to change the HTML code too much, but I still ended up making a change like this because there wasn’t a way to get around it. I think it’s fine, as tables should be used to render lists of data. They shouldn’t be used for layouts or parts of layouts. That was a thing in the '90s when that was the only way we could build a layout. Today, we should use grid layouts. However, back to the topic. As you can see, I managed to fix this with minimal code changes, and I hope it gives you an idea of how to fix issues like this in your own projects. If you think there’s a better way to do this, please let me know.