Top Border Image in CSS3

Question

I've used border, border-top-image, border-image and none seem to do what I am after.

I have the following CSS:

#footer {
    overflow: hidden;
    clear: both;
    width: 100%;
    margin: 0 auto;
    padding: 26px 0 30px 0;
    border-top-image: url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg');
    font-size: 0.8461538461538462em;
    color: #aaa;
}

This does not seem to apply to the website I am trying to work on, I've tried it in Firefox and Chrome.

I only want the image to appear on the top border and wish to have no other borders (so it's sort of like a <hr />)

Answer 1

I don't think that there is any such property like border-top-image to give image border to any side of an element - Use

border-image:url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg') 30 30 round;

but it give border around all sides. To remove border around rest of the sides I gave -

border-bottom:0;
border-left:0;
border-right:0;

It worked and here is my fiddle - http://jsfiddle.net/ashwyn/c7WxG/1/

Answer 2

There is the border-image-width: a b c d; property. The details:

• a-d are the widths of the top, right, bottom and left borders, respectively
• values of a-d may be in the form:
  • [x]px
  • [x] - multiples of border-width value
  • [x]% - percent of the image slice (appears non-working in Safari 7)
  • auto - derive from the width of the corresponding image slice
• the default value is 1.
• if you omit d, the value of b is used for the left border width
• if you also omit c, the value of a is also used for the bottom border width
• if you also omit b, the value of a is used for all borders :)

So for your example you could use:

border-image-width: 100% 0 0 0;

Alternatively the border-image shorthand property includes border-image-width as a parameter, so in one line of CSS:

border-image: url(image.png) 100% 0 0 0 / [desired_border_width]px 0 0 0 repeat;

This uses the entire image for the top slice ("100% 0 0 0") and applies it as the top border at the desired width.