I’ve read all I can about the border-image property but can’t get my head all around it. I’ve created a 1x5px dotted pattern that looks like x____x____x____x____x (1px solid and 4px transparent)
Now, I’m pretty sure I need to cut the pattern some alternative way since I’m only able to get the border top and bottom. I’m using the following CSS: (with vendor-prefixes on the site ofc..)
border-top: 1px dotted;
border-image: url(../img/dottedline.png) 5 repeat;
Basically, I need it to repeat the image all the way around and since it’s sized 1×5 I thought…
Your image must be higher than 1 px and containing left and right patterns:
Thank you. I got a bit further with a 21x21px image with borders all the way around looking like this: http://cl.ly/4RsR/Screen_shot_2011-02-08_at_5.14.49_PM.png
However, I cannot get the middle parts to work.
border: 1px solid; border-image: url(border.png) 1 5 5 1 repeat;
I think I’ve tried every possible combination but can’t get it to work with this image. Is it the image or the slices that are wrong?
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".