Border Length Smaller Than Div Width

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>

Anyway to create border right that shorter than div height?

You can use :after, see this jsfiddle http://jsfiddle.net/mLycophq/2/
Your pipe is as high as your text in your div or you can change it by font-size.

div{
    height:20px;
    background-color:red;
    margin: 0 10px;
    padding: 10px;
    display: inline-block;
}

div:after{
    content: "|";
    color:black;
}

Or with a border property.

div:after{
    content: "";
    color:black;
    border-right:1px solid black;
    font-size: 10px;
}

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>

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>

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>

Border bottom smaller than the text

You can do something like this using ::after

JSFiddle

CSS:

h1 {
    font-size:64px;
    position:relative;
    text-align:center;
}

h1::after {
    content:'';
    position:absolute;
    width:150px;
    height:1px;
    background:#000;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

You can use float:left or float:right to get your text to to align left or right, however you want.

This way, you don't need any extra HTML elements.

Is there a shorter way to write a border on only one side?

You can apply border-width of 2px only to the top edge according to the documentation as following

<div class="border-t-2 border-blue-900">foo</div>

The error made was there is no utility class called border-t-1 in tailwind-CSS. Also applying border utility class adds the the CSS styling of border-width: 1px; which adds a border-width to all sides.

Check out the solution at tailwind playground

EDIT: Check out shingo.nakanishi's answer top apply border-top-width of 1px if you are using JIT mode