Create HTML Element with text that extends into border

Question

I'm trying to create an HTML element that looks like this:-

Basically, a <div> or other element with a border, and the internal (possibly multi-line) text centred within the div, but extending into the border area.

So far, the only scheme I have that works is to use three(!) divs : One for the border, a second one as a container for the third one, to ensure the vertical centring is right.

<div class="BORDER" style = "left: 190px; top: 50px;">
</div>

<div class = "WRAPPER" style = "left: 190px; top: 50px;">
  <div>TEST THREE</div>
</div>

This feels awkward: Is there a way of achieving the same look using fewer elements?

Restrictions (clarified)

• The text can have one or more lines
• The border will be an image, and will eventually be stretched via the border-image mechanism.

JSFiddle with CSS and some other (failed) attempts is here. http://jsfiddle.net/6wB3k/

Answer 1

I'm not sure if it's adaptable to your real use case but I can achieve your display with only one div :

HTML :

<div class=dystroy>TEST FOUR</div>

CSS :

.dystroy {
  position: fixed;
  left: 50px; top: 50px;
  margin: 0px;
  padding: 16px;
  height : 48px;
  width : 50px;
  display : table-cell;
  vertical-align : middle;
  text-align : center;
  color:  #000000;
  font-size : 16px;
  font-family : Calibri;
}

.dystroy:after {
  position: relative; 
  display : table-cell;
  top: -48px; left:0px;
  border: solid;
  border-width: 16px 16px;
  border-color: #e0e0e0;
  height: 32px;
  width: 50px;
  content:" ";
  z-index:-1;
  font-size : 16px;
}

Demonstration

EDIT : in fact there's no real dynamic vertical centering here, which would need an additional div.

Answer 2

If you are open to use CSS3 shadows, then you can try this:

Fiddle: http://jsfiddle.net/6wB3k/2/

div {
    width: 50px;
    height: 50px;
    text-align: center;
    border: 1px solid #ccc;
    -webkit-box-shadow: 0 0 0px 11px #ccc inset;
}

Syntax: box-shadow: x-offset y-offset blur spread #color inset

You can experiment with blur and size to adjust according to your requirements.

Update:

As per your comment regarding the need to use border-image, here is one try using background-image instead of a 9-grid border-image. I think, this can suit your purpose of using images?

Updated Fiddle: http://jsfiddle.net/6wB3k/3/

div {
    width: 50px;
    height: 50px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;

    background-image: url(http://placehold.it/11x11), url(http://placehold.it/11x11), url(http://placehold.it/11x11), url(http://placehold.it/11x11);
    background-position: left top, left bottom, top right, bottom right;
    background-repeat: repeat-x, repeat-y, repeat-y, repeat-x;
}