JSFiddle - React, Tailwind, and code Playground

HTML

<div class="boxed" >
MMM MMM
</div>
<p>border patterns:</p>
<p>top-left, top, top-right:</p>
<p>⢐ ⠐ ⢐</p>
<p>left, right:</p>
<p>⢐   ⢐</p>
<p>bottom-left, bottom, bottom-right:</p>
<p>⠐ ⠐ ⠐</p>
<p>border image:</p>
<img id="border-image" src="data:image/svg+xml;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAHgEAQAAABhbfR1AAAABGdBTUEAALGPC/xh BQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA AmJLR0QAAKqNIzIAAAAHdElNRQfnDAsMNyx+od4pAAAaf0lEQVR42u3df2hVdfzH 8c/16rQ22dlyVmh+V+Au1gpFlGKu/MNb4VfvUCr6Q4oG4a4iUyErzB/x/aeoIJ2a 5iLph2ktcQkJFQx/jERIt3vl0rLYCEEqCtK6d4nd1/ePuzMrZ9rOufdz7nw+4MPu +efe9/t13/d4zuHeozEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8mLJeWN00Rgp 93fJedsV/d3MdmOy8Vx92XhuO0ioj/qsGvzw6tKHeNQJ21Vd4obnrmzcmFCT7aqo j/oC4m8f3oH1P7aLukp9ju2iqI/6goJ/gamP+oq3Ps6BqY/6irg+Y0zuX9z/McH6 l/evQk25w5ZA7fmoj/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABI1UEul5 NxpJxT76Ib04ndUQ0isyt6Ua2x7tWR7tlkqabdccJOTnDfkNk1Q+Ljmm5T03pJ27 pdj9Us1hqapFci5IVfulSJkUOy61rrsUaHJsy0GpfKHtHsiveJHfsIMzSxIzV74s SV2npTpJ4V1D3Q3/8hWeKs2ZKyUO5IJM1Dd3S6bRdk/kVzzIz1N4ZeG+xu5aSYoe kswd1xbcZWuKFJ2RC7FvcfcoqXSP7d7IL/jIz4Ps6JteS89Pp4+mJCc+zOD+sZxe qXOtlP4k0/TnixNutt0j+QUX+XkglW7PLOqv3LNACv/oT3iDhzWd0u6MlF6bqZVK O2z3Sn7BQ36ewjMres91mc75UniHv+ENhpiSOhulvm3dn0rmCds9k19wkJ9Hibrm s5JUkYfg/nY40zFwYaGuOWD/WRv5kV+Rkso/lKR5z+c3PHdF17gX+svvst07+dlH fh4lq7Y8nnxfMrcWJkBTLXVnpWS4ZZPt3snPPvLzQCo5KElzvitQeAOrLuHuBUsa bGdAfuTnGmU7kP/qm9vnho0x5ssCnxEc+2Lg9V964G7bGXhBft6Qn0epVz6+p3V9 Yfd+7mptkFKPtTm2MyA/8ita6Z7M5thROwHG9knpRems7QzIj/zyYGa7Mdl47sWy 8dy2/ySp5g87AUaMex4yejz5kd/Iym8wPHdl48aEmvIRYNVmOwFW7XcDLH2b/Mhv ZOU35Is6eXgVyTlhJ0DHcQP0vy/yI7/h5OfjVWgtu3z7V9/3gMYYM2ZjPp716kZ3 uY8uxvx/dvLz5vrMz8cP8KyHL4WoZQPb2/PRSEWeArqaykfcR/3y/9nJz5vrMz8f P8BfNRgTljEVodzfrxry0URmR/+CyKx8xnRlkV3G9Gf/OBYKXTzg/7OTnzfkVxRS S9pmv7nJzjnIznul1Of7am1nQH7kV7R6duXuWRA+Xtjwwr/kLh/01D34tO0MyI/8 ipZUMlGS5rQXNsD6hYPfRa23nQH5kV9RS1ZsqU3EJVNdoACrpFPjpGRs21u2eyc/ +8jPI6n8RkmKFugrbfPOD/4ec73t3snPPvLzQSKy6nVJcmrzG55zeuCOCNNWLbXd...

CSS

@font-face {
  font-family: 'odt2braille8';
  src: url('https://raw.githack.com/bertfrees/odt2braille/master/odt2braille-font/src/main/resources/odt2braille8.ttf')
       format('truetype');
}
:root {
  font-family: 'odt2braille8', monospace;
  font-size: 300%;
  line-height: 1em;
  letter-spacing: 0em;
}
.boxed {
    width: fit-content;
    border-style: solid;
    border-width: 1rem 1ch;
    border-image-slice: 160 80 160 80;
    border-image-repeat: round round;
    border-image-source: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAHgEAQAAABhbfR1AAAABGdBTUEAALGPC/xh BQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA AmJLR0QAAKqNIzIAAAAHdElNRQfnDAsMNyx+od4pAAAaf0lEQVR42u3df2hVdfzH 8c/16rQ22dlyVmh+V+Au1gpFlGKu/MNb4VfvUCr6Q4oG4a4iUyErzB/x/aeoIJ2a 5iLph2ktcQkJFQx/jERIt3vl0rLYCEEqCtK6d4nd1/ePuzMrZ9rOufdz7nw+4MPu +efe9/t13/d4zuHeozEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8mLJeWN00Rgp 93fJedsV/d3MdmOy8Vx92XhuO0ioj/qsGvzw6tKHeNQJ21Vd4obnrmzcmFCT7aqo j/oC4m8f3oH1P7aLukp9ju2iqI/6goJ/gamP+oq3Ps6BqY/6irg+Y0zuX9z/McH6 l/evQk25w5ZA7fmoj/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABI1UEul5 NxpJxT76Ib04ndUQ0isyt6Ua2x7tWR7tlkqabdccJOTnDfkNk1Q+Ljmm5T03pJ27 pdj9Us1hqapFci5IVfulSJkUOy61rrsUaHJsy0GpfKHtHsiveJHfsIMzSxIzV74s SV2npTpJ4V1D3Q3/8hWeKs2ZKyUO5IJM1Dd3S6bRdk/kVzzIz1N4ZeG+xu5aSYoe kswd1xbcZWuKFJ2RC7FvcfcoqXSP7d7IL/jIz4Ps6JteS89Pp4+mJCc+zOD+sZxe qXOtlP4k0/TnixNutt0j+QUX+XkglW7PLOqv3LNACv/oT3iDhzWd0u6MlF6bqZVK O2z3Sn7BQ36ewjMres91mc75UniHv+ENhpiSOhulvm3dn0rmCds9k19wkJ9Hibrm s5JUkYfg/nY40zFwYaGuOWD/WRv5kV+Rkso/lKR5z+c3PHdF17gX+svvst07+dlH fh4lq7Y8nnxfMrcWJkBTLXVnpWS4ZZPt3snPPvLzQCo5KElzvitQeAOrLuHuBUsa bGdAfuTnGmU7kP/qm9vnho0x5ssCnxEc+2Lg9V964G7bGXhBft6Qn0epVz6+p3V9 Yfd+7mptkFKPtTm2MyA/8ita6Z7M5thROwHG9knpRems7QzIj/zyYGa7Mdl47sWy 8dy2/ySp5g87AUaMex4yejz5kd/Iym8wPHdl48aEmvIRYNVmOwFW7XcDLH2b/Mhv ZOU35Is6eXgVyTlhJ0DHcQP0vy/yI7/h5OfjVWgtu3z7V9/3gMYYM2ZjPp716kZ3 uY8uxvx/dvLz5vrMz8cP8KyHL4WoZQPb2/PRSEWeArqaykfcR/3y/9nJz5vrMz8f...