Question

I have an image that I’d like to set as the border on an element, but only as the bottom border: <- It’s teeny – but it’s right there.

Here is what I’ve got so far:

<style>
body { margin: 0; padding: 10px; }
    h1 {
background-color: red;
    border: solid transparent;
    border-width: 2px;
    border-image: 2 repeat url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAADCAYAAACqPZ51AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB9JREFUeNpiZGBgOMOABv7//48uxMDEQCQgWiFAgAEAjqADz4EvP7IAAAAASUVORK5CYII=");
}
</style>
<h1>Bacon</h1>
<p>Bacon ipsum dolor sit amet tenderloin drumstick ribeye filet mignon t-bone beef ribs. Tri-tip venison turkey salami drumstick chicken pastrami. Frankfurter pork jowl ball tip tail.</p>

Or see JS Fiddle: http://jsfiddle.net/eqpt5/.

As you can see, this puts the border image on both the top and bottom (and the sides – though you can’t see it). How can I put a border image on only the bottom using border-image?

Answer 1

Change border-width:2px to border-width:0 0 2px

In this way you are actually setting border bottom width 2px and other sides width equal to zero

Demo http://jsfiddle.net/naveenksh/eqpt5/3/