I was looking around for a while, but can't find a solution for this. Essentially, I want to use an image for the border of a square, to ensure it stays consistent while resizing (very similar to this css borders approach):
#borderimg {
-webkit-border-image: url(border.png) 30 round;
-o-border-image: url(border.png) 30 round;
border-image: url(border.png) 30 round;
}
My reason for this is that I have this image as a background for containers:
However, I have multiple containers that need to use the same style and are of different sizes. Resizing this image to fit them skews the borders, making them uneven sizes. Hence, I need to somehow make these containers responsive and the idea that came to me was to find a plugin to allow using images as borders.
Do you guys have any suggestions?
Here is example of what I mean by skewed borders when resizing container (pay attention to top and bottom borders):