Support for border image property

Community resources Product feedback
1

Hi,

Im not sure if this has been asked before. However I have a need to put a decorative border around all my containers. Is there an jedi way of doing this in webflow? Basically the border is a box with inside out arcs on the corners if that makes sense? Probably image based as it has to look like chalk as well.

Look forward to any responses around this problem :smile:

2

I would play with $.wrap(...) code to wrap the container with other element and a css :before and :after. I don’t have any experience with using the CSS :before and :after but I’m sure you could see something on the internet to proove my theory ;P

3

As much as it is supported, there’s CSS border image property:

http://vincent.polenordstudio.fr/snap/x0fv5.jpg

.border_image {
-webkit-border-image: url(border.png) 27 27 27 27 round round;
}

The full syntax for maximum support:

.border_image { 
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

It uses what is called a 9 grid, a grid system that allows for fixed corners and variable segments. Here’s a generator:

1 Like
4

That would be so cool if Webflow was supporting this :smile:

1 Like
5

Ended up using relative and absolute div containers to achieve what I was after. But I will have a look at this thanks :smile:

6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.