Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Border-image problem

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #31547
    Oskar
    Participant

    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…

    #62193
    Sirlon
    Member

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

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

    #62196
    Oskar
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.