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

Another SOLUTION - create visual "BEFORE" phseudo-element :

.yourDiv::before{
    background:url("http://lorempixel.com/200/100/");
    width:100%;
    height:20px;
}

Answer 2

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 3

The border image is specified as a URI, for two different groups: The URI of upto three images may be specified for each of the four border edges. If one image URI is given, the first tile is centered on the border line. If two image URIs are given, they meet at the center of the border line with the first image placed on the top or left side of the center. If three image URIs are given, the second becomes the center and does not tile. The other two are placed on either side of the center image, with the first going on the top or left side of the center and the third going on the bottom or right.

For more refer w3.org

Answer 4

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.

Answer 5

You said you wish to have no other borders, so instead of border-image-width you can also simply use the border-width shorthand :

see https://jsfiddle.net/j2x6n3q9/