Border image?

("Help" section for this thing.)

CSS gives you a way of using a single image to define borders for an element. You set how the image should be sliced into a 3x3 grid, by defining a margin from each edge. Printists could think of this as an inverse bleed, maybe? Back in the day we used to do this with <table>s but we have other tools now.

Hopefully it is somewhat easy to understand the tool? You paste an image. Keep pasting to see a few random margin variants.

In the left pane you can edit the offsets so they align with your image. Click and drag the cyan and magenta shaded areas, those are your handles.

The right pane is meant as a preview. You can resize the textarea there, to get a feel for how the border looks at different sizes of thing to contain.

That textarea is also what you can consider the "output" of this tool. The text it contains should be the css to replicate the effect, if you point it at the right image. Ez!

Also, note the "stretch modes" selectable on top of the right pane. It changes the behavior in an interesting way.

This is all in-browser. I'm trying to lean on it as much as possible. All the stuff is in the index.html...

A thing about me is i don't wanna do math. I find the margin things to be a bit annoying. And so here we are!

Note: comments are posted manually when i feel like it. This is all static html baby plus i have other things to do also.

(everyone was quiet so far.)