[html] Border length smaller than div width?

I have following code

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

DEMO

The div width is 200px so border-bottom is also 200px but what should I do if I want border-bottom only 100px without changing div width?

This will help:

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

<hr width="50%">

This creates a horizontal line with a width of 50%, you would need to create/modify the class if you would like to edit the style.

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.

Late to the party but for anyone who wants to make 2 borders (on the bottom and right in my case) you can use the technique in the accepted answer and add an :after psuedo-element for the second line then just change the properties like so: 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;
}

I just accomplished the opposite of this using :after and ::after because I needed to make my bottom border exactly 1.3rem wider:

My element got super deformed when I used :before and :after at the same time because the elements are horizontally aligned with display: flex, flex-direction: row and align-items: center.

You could use this for making something wider or narrower, or probably any mathematical dimension 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;
}

Sorry, this is SCSS, just multiply the numbers by 10 and change the variables with some normal values.

I have case to have some bottom border between pictures in div container and the best one line code was - border-bottom-style: inset;

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

The border is given the whole html element. If you want half bottom border, you can wrap it with some other identifiable block like span.

HTML code:

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

CSS as below:

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

You can use a linear gradient:

div {_x000D_
    width:100px;_x000D_
    height:50px;_x000D_
    display:block;_x000D_
    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);_x000D_
 background-position: bottom;_x000D_
 background-size: 100% 25px;_x000D_
 background-repeat: no-repeat;_x000D_
    border-bottom: 1px solid #000;_x000D_
    border-top: 1px solid red;_x000D_
}

<div></div>

I did something like this in my project. I would like to share it here. You can add another div as a child and give it a border with small width and place it left, centre or right with usual CSS

HTML code:

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

CSS as below:

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

You cannot have a different sized border than the div itself.

the solution would be to just add another div under neath, centered or absolute positioned, with the desired 1pixel border and only 1pixel in height.

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

I left the original border in so you can see the width, and have two examples -- one with 100 width, and the other with 100 width centered. Delete the one you dont wish to use.