For this guide I have created a sample zip with everything you need to play around with the code. You can even replace sample.svg with your own SVG to test it out!
https://drive.google.com/file/d/1knDUdUSdTsb_X14UcspkCtSfQBjNyW-n/view?usp=sharing
In the program you use to design, create a 3x3 ruler/guideline grid with equal spacing. The corners of this grid will correspond to the corners of the border. The middle square of the grid is where the text/content will be, so keep this in mind!
A 3x3 grid of guide lines in Adobe Illustrator (2023)
SVG image cutting is done in the CSS code of the widget/document. If you’re using a 3x3 grid, it’s recommended to set the border-image-slice property to 33.3% to get as close to 100% as possible.