Create HTML Element with text that extends into border - html

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;
}

Answer 3

The following works:
<div style="border: 9px solid #ccc; width: 40px;">
<p style="margin: 0 -.5em;">Test text</p>
</div>
However, if you're spilling over your border, it's not strictly a border in the literal sense so much as it is a background image; perhaps there's another way of looking at your layout?