Top Border Image in CSS3

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.

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

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

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/

Related