Certainly : ) it's simple enough to paste here. On note though, the colors/theme you see in my screenshot is deceiving. I'm using the basic Vanilla tW theme but my system is set up with Windows high contrast inverted which reverses all the Vanilla colors.
The tiddler is mainly Vanilla with a TW styled table-- each count section in a cell.
The CSS (which is in a general stylesheet tagged tiddler to work throughout the wiki) for the bordered numbers:
*(you can change the "rags" prefix of the class to what you may prefer)
/* span bordered small bold numbers text*/
.ragsspannumb {border:solid 1px; border-radius:4px; padding:0px 4px 0px 4px; font-size: smaller; font-weight: bold;}
.ragsspanboldnumb {border:solid 2px; border-radius:4px; padding:0px 4px 0px 4px; font-size: smaller; font-weight: bold;}
.ragsspandoublenumb {border:double 3px; border-radius:4px; padding:0px 4px 0px 4px; font-size: smaller; font-weight: bold;}
.ragsspandottednumb {border:dotted 1px; border-radius:4px; padding:0px 4px 0px 4px; font-size: smaller;}
.ragsspandashednumb {border:dashed 1px; border-radius:4px; padding:0px 4px 0px 4px; font-size: smaller; font-weight: bold;}
for bordered text spans without the reduced font:
/* span bordered normal text */
.ragsspan {border:solid 1px; border-radius:4px; padding:0px 4px 0px 4px;}
.ragsspanbold {border:solid 2px; border-radius:4px; padding:0px 4px 0px 4px;}
.ragsspandouble {border:double 3px; border-radius:4px; padding:0px 4px 0px 4px;}
.ragsspandotted {border:dotted 1px; border-radius:4px; padding:0px 4px 0px 4px;}
.ragsspandashed {border:dashed 1px; border-radius:4px; padding:0px 4px 0px 4px;}
and the tiddler code (repeated from post above)