[HELP] Quick CSS-related API question

So while this is technically API related, it deals more with the CSS side of things, so I thought it'd be more prudent to put it over here. Feel free to move it if it's not relevant enough. So I'm attempting to style some API messages that are output to the chat. This is my code: //adapted from Ciorstaidh's Faerun Calendar css         var divstyle = 'style="width: 189px; border: 1px solid #353535; background-color: #f3f3f3; padding: 5px; color: #353535;"'         var tablestyle = 'style="text-align:center; margin: 0 auto; border-collapse: collapse; margin-top: 5px; border-radius: 2px"';         var headstyle = 'style="color: #f3f3f3; font-size: 18px; text-align: left; font-variant: small-caps; background-color: #353535; padding: 2px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"';         var cellstyle = 'style="border: 1px solid #353535; border-radius: 2px;"';         var rowstyle = 'style="border: 1px solid #353535"';                  sendChat(who, '<div ' + divstyle + '>' + //--             '<div ' + headstyle + '>Combat</div>' + //--             '<table ' + tablestyle + '>' + //--             '<tr><th ' + cellstyle + '> ' + AName + '</th><th '+ cellstyle +'>' + DName + '</th></tr>' + //--             '<tr><td ' + cellstyle + '> Dmg: ' + DmgA + '</td><td ' + cellstyle + '> Dmg: ' + DmgB + '</td></tr>' + //--             '<tr><td ' + cellstyle +'> Hit: ' + (HitA - AvoB) + '</td><td ' + cellstyle + '> Hit: ' + (HitB - AvoA) + '</td></tr>' + //--             '<tr><td ' + cellstyle +'> Crit: ' + CritA + '</td><td ' + cellstyle + '> Crit: ' + CritB + '</td></tr>' + //--             '</table>' + //--             '</div>'         ); Which looks like this: Now, I want to round the corners of the internal table, which I have attempted to do with this- border-radius: 2px; But trying this on neither the table itself nor the individual tables seems to work. I even tried manually editing the styles of each cell via Inspect Element, but that didn't work either. Basically, is there some possible way to round the corners of a border-collapsed table using inline CSS?

Maybe this will help:  Stackoverflow

Hmmm. Sort of, but not really? You can't really use selectors in inline CSS, and when trying to specifically style the individual cells or individual rows instead, it doesn't seem to change anything either... though in Firefox's Inspect Element Computed Styles tab, it still tells me that the radius has been set to that, so it doesn't seem to have been overwritten by anything either. This is my new and updated code (yields the same result, visually) //adapted from Ciorstaidh's Faerun Calendar css         var divstyle = 'style="width: 189px; border: 1px solid #353535; background-color: #f3f3f3; padding: 5px; color: #353535;"'         var tablestyle = 'style="text-align:center; margin: 0 auto; border-collapse: collapse; margin-top: 5px; border-radius: 2px"';         var headstyle = 'style="color: #f3f3f3; font-size: 18px; text-align: left; font-variant: small-caps; background-color: #353535; padding: 2px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"';         var cellstyle = 'style="border: 1px solid #353535; border-radius: 2px;"';         var rowstyle = 'style="border: 1px solid #353535"';                  sendChat(who, '<div ' + divstyle + '>' + //--             '<div ' + headstyle + '>Combat</div>' + //--             '<table ' + tablestyle + '>' + //--             '<tr><th ' + cellstyle + '> ' + AName + '</th><th '+ cellstyle +'>' + DName + '</th></tr>' + //--             '<tr><td ' + cellstyle + '> Dmg: ' + DmgA + '</td><td ' + cellstyle + '> Dmg: ' + DmgB + '</td></tr>' + //--             '<tr><td ' + cellstyle +'> Hit: ' + (HitA - AvoB) + '</td><td ' + cellstyle + '> Hit: ' + (HitB - AvoA) + '</td></tr>' + //--             '<tr style="border: 1px solid #353535; border-bottom-left-radius: 2px;"><td style="border: 1px solid #353535; border-bottom-left-radius: 2px;"> Crit: ' + CritA + '</td><td ' + cellstyle + '> Crit: ' + CritB + '</td></tr>' + //--             '</table>' + //--             '</div>'         );

Actually, I have another question. Does Roll20's HTML/CSS parser support flexboxes, and if not, what's the easiest way to horizontally align content? I've reworked my code to be this (not using tables entirely): var divstyle = 'style="width: 189px; border: 1px solid #353535; background-color: #f3f3f3; padding: 5px; color: #353535;"'         var tablestyle = 'style="text-align:center; margin: 0 auto; border-collapse: collapse; margin-top: 5px; border-radius: 2px"';         var headstyle = 'style="color: #f3f3f3; font-size: 18px; text-align: left; font-variant: small-caps; background-color: #353535; padding: 2px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"';         var namestyle = 'style="background-color: #353535; color: #f3f3f3; text-align: center; display: inline-block; width: 45%; margin-top: 4px; border-radius: 10px; font-family: Helvetica, Arial, sans-serif;"'         var wrapperstyle = 'style="display:flex; justify-content: center; padding:2px;"'         sendChat(who, '<div ' + divstyle + '>' + //--             '<div ' + headstyle + '>Combat</div>' + //--             '<div ' + wrapperstyle +'>' + //--             '<div ' + namestyle + '>'+ AName +'</div>' + //--             '<div ' + namestyle + '>'+ DName +'</div>' + //--             '</div>' + //--             '</div>'         ); Which returns this: Now, inspecting the element reveals that the "display: flex" and "justify-content: center" seem to have been completely 'snipped out' of the div. I'm assuming that this means that Roll20 doesn't support flexboxes at all, but if that's the case, then how can I horizontally align these two divs easily?

Hmmm. Sort of, but not really? You can't really use selectors in inline CSS, and when trying to specifically style the individual cells or individual rows instead, it doesn't seem to change anything either... though in Firefox's Inspect Element Computed Styles tab, it still tells me that the radius has been set to that, so it doesn't seem to have been overwritten by anything either. I haven't read the stuff too closely, but you should not need selectors, you just inline everything. But apparently, border-collapse: collapse is incompatible with a border-radius. The easiest solution seems to be suggested in one of the answers: wrap the whole table in a <div>, then set the border and border-radius on the <div>, and set overflow:hidden on the <div>. Now, inspecting the element reveals that the "display: flex" and "justify-content: center" seem to have been completely 'snipped out' of the div. I'm assuming that this means that Roll20 doesn't support flexboxes at all, but if that's the case, then how can I horizontally align these two divs easily? That's a shame, display: flex is  supported in character sheets and roll templates, but apparently gets filtered out by the chat parser (probably not for a good reason, it's just not on the whitelist). If you just want to center the two boxes, I think that this will do it: <div style="margin: 0 auto"> <div style="display:inline-block">A</div> <div style="display:inline-block">B</div> </div> However, recreating a whole table without either flex or grid or table will be hard.

That seems to only center the wrapper div, not center the divs inside the wrapper div, unfortunately.