Any Way to Limit Border Length

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>

Border Bottom length in css

The width (length) of your border will be exactly the width of your element. You can't set border to half of your element.

If you want to change lower the width of your border - lower the width of your element:

.footer p
{
  width: 50%;
  border-bottom: solid black;
}

Here is the jsfiddle:

https://jsfiddle.net/74zgg81d/

Another option is to set a container for that p element with the desired width (and that p will use 100% of it's parent's width):

<div class="footer">
    <div style="width: 150px">
        <p>
            ADDITIONAL INFO
        </p>
    </div>
</div>

Border length smaller than div width?

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>

CSS - Border bottom length fixed to 60%

You can use pseudo element like this:

#myDiv {  background: #FED;  position: relative;  }#myDiv::after {  content: "";  width: 60%;  height: 5px;  background: red;  position: absolute;  bottom: -5px;  left: 0;}

<div id="myDiv">  My div</div>

How to shorten the length of the border-bottom? In html/css

You can't change the actual length of the border.

You'd need to use a positioned pseudo-element.

div {  width: 100px;  height: 100px;  background: rebeccapurple;  margin: 1em auto;  position: relative;}
div::after {  content: "";  position: absolute;  height: 10px;  background: red;  top: 100%;  width: 50%;  left: 50%;  transform: translateX(-50%);}

<div></div>

How to limit the length of a border in css?

Based on the code you gave in the fiddle,you set the width attribute in the table tag width="100%", try set it to whatever value you want.

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-size: 
20px;
...
">

<table cellpadding="0" cellspacing="0" border="0" width="600" style="font-size: 
20px;
...
">

How to reduce bottom border length on hover of button?

Use background instead of border.

.storybook-button {
  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
  padding: 15px 25px;
  color: #333;
  background-color: transparent; 
  background: linear-gradient(blueviolet 0 0) center bottom / 100% 5px no-repeat;
  transition: 0.3s linear;
}

.storybook-button:hover {
/*        border-width border-height */
  background-size: 50% 5px;
}

<div class="storybook-button">Button</div>

controlling border length

You will need to use a child div of the appropriate width to do that. For example:

<div id="outer">
  <div id="border"></div>
  <p>...</p>
</div>

with:

#outer { width: 100px; padding-top: 0; }
#border { width: 40px; border-top: 1px solid black; margin-top: 0; }

Can anybody help me with limiting an html buttons border to a certain length?

You can use the pseudo element after to make this work. Here are the changes i made that you should be weary of:

.button {
  background-color: salmon /* so you can see the changes easier */
  position: relative /* this is so we can anchor the :after element */
}
.button:after {
  content: "";
  background: black;

  /* so we can adjust the position of the border bottom */
  position: absolute;

  /* bottom: 0 is to put it at the bottom*/
  bottom: 0;

  /* left: 5% is to center it */
  left: 5%;

  height: 1px;
  width: 90%;
}

.btn-group .button {
  /* background-color: #fffff1; */
  background-color: salmon;
  border: none;
  border-radius: 8px;
  color: #3c4043;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  width: 150px;
  display: block;
  position: relative;
}

.btn-group .button:after {
  content: "";
  background: black;
  position: absolute;
  bottom: 0;
  left: 5%;
  height: 1px;
  width: 90%;
}

.btn-group .button:hover {
  background-color: #fffff1;
  box-shadow: 0 0px 4px 0 rgba(0,0,0,0.24), 0 0px 32px 0 rgba(0,0,0,0.19);
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>


<div class="btn-group">
  <button class="button button1">Button</button>
  <button class="button button2">Button</button>
  <button class="button button3">Button</button>
  <button class="button button4">Button</button>
</div>

</body>
</html>

Any Way to Limit Border Length