How to use border image along one side only?
css, html
Solution
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/
Problem
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`?