treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

Border-image problem

  • Oskar
    Permalink to comment #
    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 1x5 I thought…
  • Sirlon
    Permalink to comment #
    Your image must be higher than 1 px and containing left and right patterns:

    http://css-tricks.com/understanding-border-image/
  • Oskar
    Permalink to comment #
    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?

Add a Comment