Цель — есть текст, который при верстке необходимо подчеркнуть, но использовать для этого изображение.
Пусть есть текст: «Это надо подчеркнуть».
Пусть у вас есть изображение для подчеркивания, например такое: 
Понятно, что обычным свойством «Border» не получится.
Создание сетки в Bootstrap тоже не очень поможет (получится не очень красиво).
Очевидно, что нужно использовать свойство «border-image», но все пояснения по нему в известных источниках просто выносят мозг и заточены на то, что есть рисунок с цикличным изображением, который и используется, а нам нужно другое.
Как сделать.
В HTML добавляем:
<span id=»podcherk»>Это надо подчеркнуть </span>
В CSS добавляем:
#podcherk{
border-style: solid;
border-width: 0px 0px 10px;
-moz-border-image: url(../[ваш каталог с изображением]/[имя файла вашего изображения].png) 0 0 10 stretch;
-webkit-border-image: url(../[ваш каталог с изображением]/[имя файла вашего изображения].png) 0 0 10 stretch;
-o-border-image: url../[ваш каталог с изображением]/[имя файла вашего изображения].png) 0 0 10 stretch;
border-image: url(../[ваш каталог с изображением]/[имя файла вашего изображения].png) 0 0 10 fill stretch;}
Здесь:
10px — это высота нижнего подчеркивания
fill stretch — растянет изображение на длину спана.
В результате получиться вот так (на синий фон не обращайте внимание):
Что нам и требовалось.
Еще вам может пригодиться мастер создания кода, очень удобный — тут:
