Greetings!
Have you been annoyed by the default table styles stopping you from adding rounded corners? Have you tried hacky solutions involving overflow: hidden? No? In any case, I’ve found a way to easily re-declare the table styles to allow for adding border radius.
I’ll skip to the chase and just give you the code to do this. Unlike some sort of recipe site trying to optimize SEO to be the number 1 blueberry pie on Google, this is just some random forum post. Oh, and feel free to ignore extra stuff afterwards, it’s just images and lore for CSS nerds.
The Code
/* Fix the borders and add a radius variable */
:root table {
--table-border-radius: 8px;
border-collapse: separate;
border-spacing: 0;
}
/* Add the radius */
th:first-child {border-top-left-radius: var(--table-border-radius)}
th:last-child {border-top-right-radius: var(--table-border-radius)}
tr:last-child td:first-child {border-bottom-left-radius: var(--table-border-radius)}
tr:last-child td:last-child {border-bottom-right-radius: var(--table-border-radius)}
/* Redo the borders */
:root :is(td, th) {
border-width: 0 var(--table-border-width) var(--table-border-width) 0;
}
And some images on various themes:
The Lore
Ok, but why is this even an issue?
Well long ago, in a galaxy far far away… We had crappy table styles! Tables are written with some weird properties. This was due to some old stuff that I didn’t read enough background information to talk about with confidence. It’s different to styling flex or grid display modes if you’re used to those.
The one declaration that really kills us here is border-collapse which is set to collapse in Obsidian. This makes the borders of the table cells combine together. While this looks great, it also breaks all functionality of border-radius.
The Solution
The main issue we have to fix is the bugs caused by setting border-collapse to separate. When you do so, your table explodes into uncombined cells.
We can fix the cell spacing with border-spacing: 0 but this leaves doubled up borders in the center.
Now we just need to fix these borders.
The first thing I thought of was to reset it completely and re-define all the styles. This would have been a large pain. Fortunately, I realized that I could use the existing border colors to do everything I wanted by changing the borders of the table cells to only have widths on the bottom and left sides. The outside table’s border will eat up the extra borders.
We have succeeded in making it look like nothing has happened!
All these steps to recreate the original table get us the code:
/* Fix the table */
:root table {
border-collapse: separate;
border-spacing: 0;
}
/* Redo the borders */
:root :is(td, th) {
border-width: 0 var(--table-border-width) var(--table-border-width) 0;
}
The :root is added because of some funky specificity stuff, but it just adds 1 to the specificity.
After this, it’s just adding the borders to the table’s cells rather than the outside. To do this, I edit the actual table cells in each corner with some :first-child pseudo-classes to get each one.
Our result of this is the following:
/* Add the radius */
th:first-child {border-top-left-radius: 8px}
th:last-child {border-top-right-radius: 8px}
tr:last-child td:first-child {border-bottom-left-radius: 8px}
tr:last-child td:last-child {border-bottom-right-radius: 8px}
This gives us everything we want!
While I could leave these numeric values, I think a CSS variable to make it easier to edit all at once. Putting all these steps together, we get the final code. If you had a body selector with other styles, you could move the variable there. Since this is just an example snippet, I’m leaving it in the table selector.
/* Fix the borders and add a radius variable */
:root table {
--table-border-radius: 8px;
border-collapse: separate;
border-spacing: 0;
}
/* Add the radius */
th:first-child {border-top-left-radius: var(--table-border-radius)}
th:last-child {border-top-right-radius: var(--table-border-radius)}
tr:last-child td:first-child {border-bottom-left-radius: var(--table-border-radius)}
tr:last-child td:last-child {border-bottom-right-radius: var(--table-border-radius)}
/* Redo the borders */
:root :is(td, th) {
border-width: 0 var(--table-border-width) var(--table-border-width) 0;
}
A little complicated, but a clean solution in the end!