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

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>

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>


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: