Any Way to Declare a Size/Partial Border to a Box

Any way to declare a size/partial border to a box?

Not really. But it's very easy to achieve the effect in a way that degrades gracefully and requires no superfluous markup:

div {  width: 350px;  height: 100px;  background: lightgray;  position: relative;  margin: 20px;}
div:after {  content: '';  width: 60px;  height: 4px;  background: gray;  position: absolute;  bottom: -4px;}

<div></div>

Any way to limit border length?

#mainDiv {
  height: 100px;
  width: 80px;
  position: relative;
  border-bottom: 2px solid #f51c40;
  background: #3beadc;
}

#borderLeft {
  border-left: 2px solid #f51c40;
  position: absolute;
  top: 50%;
  bottom: 0;
}

<div id="mainDiv">
  <div id="borderLeft"></div>
</div>

Adding line or border bottom inside the input with some width

Use background and gradient for this:

.form-control {  padding: 15px 20px;  border: 1px solid #000;  background:     linear-gradient(black, black)     bottom/ /* Position */    80% 5px /* Width height */     no-repeat;}

<input type="text" class="form-control" name="text" value="text" >

How to change the width of a CSS border independently from it's parent?

You can try using ::before and ::after

#foo {
    height: 100px;
    width: 100px;
    background-color: red;
}

#foo::before {
  border-top: 5px solid blue;
  width: 80px;
  height: 5px;
  position: absolute;
  content: '';
  margin-left: calc((100px - 80px)/2);
  top: 3px;
}

<div id="foo"></div>

css partial border to create 'place holder'

There is a CSS solution, but it's complicated and also requires HTML markup:

#box {
    width: 200px;
    height: 200px;
    margin: 30px;
    position: relative;
}

#box > div.corner {
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
}

.top {
    top: 0px;
    border-top-style: solid;
}

.bottom {
    bottom: 0px;
    border-bottom-style: solid;
}

.left {
    left: 0px;
    border-left-style: solid;
}

.right {
    right: 0px;
    border-right-style: solid;
}

<div id="box">
    <div class="corner top left"></div>
    <div class="corner top right"></div>
    <div class="content">content</div>
    <div class="corner bottom left"></div>
    <div class="corner bottom right"></div>
</div>

DEMO

border only half the side of a div

If by adding a second div you mean no write it in the html you can simply use the ::after css property on your div like this:

div {  width: 100px;  height: 150px;  background: black;  position: relative;}
div::after {  content: "";  position: absolute;  width: 3px;  right: -3px;  height: 60%;  background: red;  top: 50%;  transform: translate(-50%, -50%);}

<div></div>