Border

by JuanMa

HTML

<h1 class="primero">El título aquí</h1>
<br>
<h1 class="primero-bis">El título aquí</h1>
<br>
<h1 class="segundo">El título aquí</h1>
<br>
<h1 class="tercero"><p>El título aquí</p></h1>
<br>
<h1 class="cuarto">El título aquí</h1>

CSS

h1{
    display:inline-block;
    padding: 2px 5px;
}
.primero{
    box-shadow: 0 5px 0 0 #000,  0 8px 0 1px #fff,  0 11px 0 0 #000;
}
.primero-bis{
    box-shadow: 
    0 5px 0 0 #000, 0 7px 0 1px #fff, 
    0 11px 0 0 #000, 0 13px 0 1px #fff, 
    0 16px 0 0 #000, 0 18px 0 1px #fff, 
    0 22px 0 0 #000, 0 24px 0 1px #fff, 
    0 30px 0 0 #000;
}
.segundo{
    border-bottom: 12px solid transparent;
    -webkit-border-image: url(https://dl.dropboxusercontent.com/u/6499300/imagenes/borderA.png) 30 30 round; 
    -o-border-image: url(https://dl.dropboxusercontent.com/u/6499300/imagenes/borderA.png) 30 30 round; 
    border-image: url(https://dl.dropboxusercontent.com/u/6499300/imagenes/borderA.png) 30 30 round;
}
.tercero{
    border-bottom: 2px solid #000;
    padding:0;
    padding-bottom:3px;
}
.tercero p{
    margin:0;
    border-bottom: 5px solid #000;
    padding: 2px 5px;
    
}
.cuarto{
    position:relative;
    border-bottom: 5px solid #000;
}
.cuarto:before{
    position:absolute;
    content:"";
    width:100%;
    height:0;
    left:0;
    bottom:-11px;
    border-bottom: 2px solid #000;
}