Edit in JSFiddle


              
<div class="elem simple">
    <span class="label begin"> &lt;div class="simple"&gt; </span>
    <p>小一点</p>
    <span class="label end"> &lt;/div&gt; </span>
</div>

<div class="elem fancy">
    <span class="label begin"> &lt;div class="fancy"&gt; </span>
    <p>大一点</p>
    <span class="label end"> &lt;/div&gt; </span>
</div>
.elem{
    border:solid #6AC5AC 3px;
    position:relative;
}

.simple {
  width: 500px;
  margin: 20px auto;
}
.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

.label{
    position:absolute;
    background-color:#6AC5AC;
    line-height:1em;
    padding:3px;
}
.begin{
    left:0;
    top:0;
}
.end{
    right:0;
    bottom:0;
}
p{
    margin:2em 0;
    display:block;
}