Grow your CSS skills. Land your dream job.

Border-image problem

  • # February 8, 2011 at 9:33 am

    Hi,

    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…

    # February 8, 2011 at 9:48 am

    Your image must be higher than 1 px and containing left and right patterns:

    http://css-tricks.com/understanding-border-image/

    # February 8, 2011 at 11:24 am

    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?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".