How to add a border-bottom-image with css

Here are two options that allow you to do what you want without resorting to border-image, which is not really built for what you want to do.

background-image + :after

This uses a pseudo-element (:after) to "insert" a block with your given image as the background-image. I think this is probably better than the next option, since it's least disruptive to the element's styling.

.entry-title:after {
    content: "";
    display: block;
    height: 70px;
    background-image: url(http://placehold.it/350x65);
    background-repeat: no-repeat;
    background-position: center bottom;
}

http://jsfiddle.net/mh66rvbo/2/

background-image + padding

This uses padding-bottom to make space for the image, then sticks the image along the bottom of the element, positioning in the center.

.entry-title {
    padding-bottom: 70px;
    background-image: url(http://placehold.it/350x65);
    background-repeat: no-repeat;
    background-position: center bottom;
}

http://jsfiddle.net/mh66rvbo/1/

Tags:

Html

Css

Image