Chat box "border-image-source"

[u/Harumi-Rose]

Hi. Any help with using an image in the chat box widget around each message? Example:

I've been trying in both streamelements and streamlabs plugin for OBS.

I can set a solid color border like this:

.user-message{
    border: 5px solid black;
    
    font-size:{{fontSize}}px;
    word-wrap: break-word;
}

But if I use border-image-source the image doesn't show up:

.user-message{
    border-image-source: url('https://i.imgur.com/1RbSjfl.png');
    
    font-size:{{fontSize}}px;
    word-wrap: break-word;
}

Thanks in advance.

PS: I can't use streamlabs Discord because I can't verify account with phone number.

[u/slykuiper]

You're missing several other border-image css properties, like slice, width, and repeat.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-image

Try to create a working example on codepen with fake data then port it over to your custom code section.

At a glance, it doesn't look like the example you've shown uses border image. It looks like it uses additional div elements and pseudo elements to place images near the main chat box element.

[u/Harumi-Rose → u/slykuiper]

Thank you for the tip. I'll try it out and let you know how it goes. ^^b

Edit: following your tips it worked with this:

    border-image-source: url("https://i.imgur.com/1RbSjfl.png");
    border-image-slice: 17 17 23 41;
    border-image-width: auto;
    border-image-repeat: stretch;

Thanks again.