In more recent browsers, another method to achieve this effect is by using a negative spread box-shadow. Take a look at the updated example here: http://jsfiddle.net/AbCdE/123/

box-shadow: 0px 18px 5px -18px cyan;

Although I believe the safest and most reliable approach is the previously accepted solution. Just wanted to offer an alternative technique.

My new addition is placing a line underneath the h3 tag as follows

    <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%;
        border-bottom:1px solid #e2000f;
        margin:0 auto;
        padding:4px 0px;
    }

One way to achieve a gradient effect is by using linear gradients:

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

<div></div>

If you want a border to be a different size than the div itself, one solution is to create another div underneath it that is centered or positioned absolutely, with the desired 1 pixel border and a height of 1 pixel.

For examples and demonstrations, you can visit this link.

I have kept the original border visible so you can compare widths. There are two versions provided: one with a width of 100 and the other centered with a width of 100. Simply delete the one you do not want to use.

While I may be late to the party, for those interested in creating two borders (specifically on the bottom and right in my situation), you can utilize the method outlined in the accepted answer and incorporate an :after pseudo-element for the second line. Simply adjust the properties as follows: Check out this example on JSFiddle

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

In a recent project of mine, I implemented something similar to this technique. I wanted to share it here for others to benefit from. By adding another div as a child element and styling it with a border of small width, you can easily position it to the left, center, or right using basic CSS.

Here is the HTML code snippet:

    <div>
        content 
        <div class ="ac-brdr"></div>
    </div>

And the accompanying CSS code:

   .active {
    color: magneta;
  }
   .active .ac-brdr {
        width: 20px;
        margin: 0 auto;
        border-bottom: 1px solid magneta;
  }

If you're looking to create a horizontal line with a specific width, this code snippet can help you achieve that:

For more information on how to customize the width of a horizontal line, you can visit this link.

<hr width="50%">

The above code will generate a horizontal line with a width of 50%. You have the option to modify or create a different class to further style the line according to your preferences.

In order to create a bottom border between pictures within a div container, I discovered that the most effective single line of code to use was border-bottom-style: inset;

section{
    font-size: 20px;
    line-height: 22px;
    display:inline-block;
    width:180px;
    text-align:center;
}

section::after {
    background: #ff9933 none repeat scroll 0 0;
    content: "";
    display: block;
    height: 3px;
    margin-top: 12px;
    width: 90px;
    margin:auto;
}

To apply a bottom border only to half of an HTML element, you can wrap the desired content with a span element.

Here is an example of how to achieve this:

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

Below is the CSS code for styling the elements:

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

I successfully achieved the reverse of this by utilizing :after and ::after to extend my bottom border precisely 1.3rem:

When I applied both :before and :after simultaneously, my element became distorted because they are arranged horizontally with display: flex, flex-direction: row, and align-items: center.

This technique can be used to adjust width or height, or potentially any mathematical dimension modifications:

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;      // combined margin and height
  height: 0.4rem;          // should match active link margin
  background: $e1-red;
  margin-left: -$nav-spacer-margin;
  display: block;
}
a.nav_link-active::after {
  content: '';
  margin-top: 3.3rem;      // combined margin and height
  height: 0.4rem;          // should match active link margin
  background: $e1-red;
  margin-right: -$nav-spacer-margin;
   display: block;
}

Apologies, this is presented in SCSS; simply scale up the values by 10 and substitute variables with standard measurements.

Creating a smaller border length on the right side of a parent div using pseudo-elements

@import url(https://fonts.googleapis.com/css?family=Raleway);

body{
 font-family: 'Raleway', sans-serif;
}

 
div {
  width   : 200px;
  height  : 50px;   
  position: relative;
  z-index : 1;
  background-color: #f5f5f5;
  margin: 20px auto;
  padding: 20px;
  color:#726E97;
}

div:before {
  content : "";
  position: absolute;
  right    : 0;
  top     : 25%;
  height  : 50px;
  width   : 50%;
  border-right:5px solid #726E97;
}

<div>BOX 1</div>