Frontera longitud más pequeña que div ancho?

Puede utilizar pseudoelements. E. g.

CSS:

div {
  width   : 200px;
  height  : 50px;   
  position: relative;
  z-index : 1;
  background: #eee;
}

div:before {
  content : "";
  position: absolute;
  left    : 0;
  bottom  : 0;
  height  : 1px;
  width   : 50%;  /* or 100px */
  border-bottom:1px solid magenta;
}

HTML:

<div>Item 1</div>
<div>Item 2</div>

Sin necesidad de utilizar el extra de marcado para la presentación propósito. :después de que también es apoyado desde IE8.

edición:

si usted necesita un alineado a la derecha de la frontera, acaba de cambiar left: 0 con right: 0

si usted necesita un centro alineado a la frontera simplemente establezca left: 50px;

Otra manera de hacer esto (en los navegadores modernos) es con una diferencia negativa box-shadow. Echa un vistazo a este actualizado violín: http://jsfiddle.net/WuZat/290/

box-shadow: 0px 24px 3px -24px magenta;

Creo que la forma más segura y compatible manera es el aceptado respuesta anterior, aunque. Solo que pensé que me gustaría compartir otra técnica.

Puede utilizar un gradiente lineal:

CSS:

div {
    width:100px;
    height:50px;
    display:block;
    background-image: linear-gradient(to right, #000 1px, rgba(255,255,255,0) 1px), linear-gradient(to left, #000 0.1rem, rgba(255,255,255,0) 1px);
	background-position: bottom;
	background-size: 100% 25px;
	background-repeat: no-repeat;
    border-bottom: 1px solid #000;
    border-top: 1px solid red;
}

HTML:

<div></div>

He añadido la línea del bajo h3 etiqueta como esta

<h3 class="home_title">Your title here</h3> 
.home_title{
    display:block;
}
.home_title:after {
    display:block;
    clear:both;
    content : "";
    position: relative;
    left    : 0;
    bottom  : 0;
    max-width:250px;
    height  : 1px;
    width   : 50%;  /* or 100px */
    border-bottom:1px solid #e2000f;
    margin:0 auto;
    padding:4px 0px;
}

Usted no puede tener un tamaño diferente de la frontera de la div sí mismo.

la solución sería añadir otro div en neath, centrada o absoluta posicionado, con la deseada 1pixel frontera y sólo 1pixel en altura.

http://jsfiddle.net/WuZat/3/

Salí de la frontera original para que usted pueda ver el ancho, y tienen dos ejemplos, uno con 100 de ancho, y el otro con 100 de ancho en el centro. Eliminar la que usted no desea utilizar.

Tarde a la fiesta, pero para cualquier persona que quiera hacer 2 de las fronteras (en la parte inferior y a la derecha en mi caso) se puede utilizar la técnica en respuesta y agregar un :después de pseudo-elemento de la segunda línea a continuación, sólo cambiar las propiedades como:
http://jsfiddle.net/oeaL9fsm/

div
{
  width:500px;
  height:500px;   
  position: relative;
  z-index : 1;
}
div:before {
  content : "";
  position: absolute;
  left    : 25%;
  bottom  : 0;
  height  : 1px;
  width   : 50%;
  border-bottom:1px solid magenta;
}
div:after {
  content : "";
  position: absolute;
  right    : 0;
  bottom  : 25%;
  height  : 50%;
  width   : 1px;
  border-right:1px solid magenta;
}

La frontera es dado a todo el elemento html. Si desea que la mitad del borde inferior, se puede envolver con algunos otros de identificación de bloque como span.

Código HTML:

<div> <span>content here </span></div>

CSS de la siguiente manera:

 div{
    width:200px;
    height:50px;   
    }
 span{
        width:100px;
        border-bottom:1px solid magenta;   
    } 

            div{
                font-size: 25px;
                line-height: 27px;
                display:inline-block;
                width:200px;
                text-align:center;
            }

            div::after {
                background: #f1991b none repeat scroll 0 0;
                content: "";
                display: block;
                height: 3px;
                margin-top: 15px;
                width: 100px;
                margin:auto;
            }

Esto le ayudará a:

http://www.w3schools.com/tags/att_hr_width.asp

<hr width="50%">

Esto crea una línea horizontal con una anchura de 50%, usted necesita para crear/modificar la clase si desea editar el estilo.

Yo sólo logra lo opuesto a esto el uso de :after y ::after porque me necesitaba para hacer mi borde inferior exactamente 1.3rem más amplio:

Mi elemento puse super deformado cuando he usado :before y :after, al mismo tiempo, debido a que los elementos están alineados horizontalmente con display: flex, flex-direction: row y align-items: center.

Usted podría utilizar esto para hacer algo más ancho o más estrecho, o, probablemente, cualquier matemático dimensión mods:

a.nav_link-active {
  color: $e1-red;
  margin-top: 3.7rem;
}
a.nav_link-active:visited {
  color: $e1-red;
}
a.nav_link-active:after {
  content: '';
  margin-top: 3.3rem;      //margin and height should
  height: 0.4rem;          //add up to active link margin
  background: $e1-red;
  margin-left: -$nav-spacer-margin;
  display: block;
}
a.nav_link-active::after {
  content: '';
  margin-top: 3.3rem;      //margin and height should
  height: 0.4rem;          //add up to active link margin
  background: $e1-red;
  margin-right: -$nav-spacer-margin;
  display: block;
}

Lo siento, esta es SCSS, sólo se debe multiplicar el número por 10 y el cambio de las variables con algunos de los valores normales.