CSS border at end of line on inline elements

Question

The default behaviour of inline HTML elements with a border is, that at the the end and the beginning of a line at a linebreak, there is drawn no border. Like

span {
  border: 1px solid black;
}

See result at: http://jsfiddle.net/yuszuv/ft7waga3/1/

Is there any way to draw the "missing" borders, so that each line seems to be contained in a box?

Answer 1

I am afraid you cannot make each line contained in a rectangle using border on a display:inline element.
But, a workaround that works is to use a box-shadow instead.

span {
    line-height: 32px;
    box-shadow: 0 0 0 1px black;
}

jsfiddle

Below a screenshot from FireFox:

---

As jan said, a better approach is to use box-decoration-break

According to canIuse, this should work for all latest browsers, except IE:

span {
  border: 1px solid black;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

updated jsFiddle