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:

Answer 1

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.