Create HTML Element with text that extends into border

css, html

Solution

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.

Problem

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/

Original source