Border-image for tables

[Nefa]

Forum URL: forgottenpurrsrp.boards.net

Hi,
I have been having some difficulty creating a border image for a table I am working on on my forum. Before I get frustrated, I'd just like to know if it is possible to do. I've simplified the code I'm using so that no one has to dig through anything irrelevant to my question.

[table style="border:20px solid image;border-image:url(http://i39.servimg.com/u/f39/15/55/73/97/oie_1010.jpg);"][tbody][tr][td style="background:#F8E0F1;padding:20px;"]hello testy test[/td][/tr][/tbody][/table]

This is what it ends up looking like.

Now, what I'd like is, instead of having a solid black border, I would like this image as my border. No resizing is necessary: I intentionally chose an oversized image for my own personal preference. It's fine if an image for a border is not possible, but I would like to know and help would be appreciated if it is possible.

Thanks,
nzt314

[Alanna 🥀🖤]

Images can't be borders... but you can get the same effect by having a container outside your inner one with that images as a background so it looks like a border.

[nina]

Jun 30, 2014 16:53:32 GMT -8 @khristian said:

Images can't be borders... but you can get the same effect by having a container outside your inner one with that images as a background so it looks like a border.

I'd like to try it.  How/where do you add images to the containers?

[Alanna 🥀🖤]

By adding background-image:url('IMAGE'); to a container.

[nina]

Thanks Trinity for thinking I'm that bright...but I'm not.   Are we on the style sheet of a certain theme and exactly which line do I put what, exactly?


eta: I don't know how I missed this...but I did.

[Chris]

nina, although the border-image CSS is valid it is unfortunately not supported by Proboards at this time (Image as Container Border on Proboards). It might even be beneficial to frame this (no pun intended ) as a feature request since I cannot think of any reason why this would have been left off the long list of things you can now do in V5 that you couldn't do in V4. There are a few inline CSS styles that Proboards will not allow since they have the potential of disrupting the layout or worse but unless I am missing something I don't see how border-image could be one of them.

With that said, the workaround that was used before border-image was introduced can also be used here as @khristian implied:

hello testy test


[div style="background:url(http://i39.servimg.com/u/f39/15/55/73/97/oie_1010.jpg) no-repeat center;width:150px;padding:10px;"]
[table style="width:100%;"]
[tbody]
[tr]
[td style="background-color:#F8E0F1;padding:20px;"]hello testy test[/td]
[/tr]
[/tbody]
[/table]
[/div]

It is obviously not as versatile as the border-image CSS especially since it's not automatically scaled to fit the dimensions of the element which is one of the main reasons that CSS property was created in the first place but it gets you part way there.

[nina]

Thank you Eton Bones.  I think for now I  will just make the suggestion to have the border image added to a V5 update.