Border length smaller than div width?

You can use a linear gradient:

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

<div></div>

Another way to do this (in modern browsers) is with a negative spread box-shadow. Check out this updated fiddle: http://jsfiddle.net/WuZat/290/

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

I think the safest and most compatible way is the accepted answer above, though. Just thought I'd share another technique.

You can use pseudoelements. E.g.

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

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

No need to use extra markup for presentational purpose. :after is also supported from IE8.

edit:

if you need a right-aligned border, just change left: 0 with right: 0

if you need a center-aligned border just simply set left: 50px;

I added line under under h3 tag like this

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