Alguma maneira de limitar o comprimento da borda?

Existe alguma maneira de limitar o comprimento de uma borda. Eu tenho um <div>que tem uma borda inferior, mas quero adicionar uma borda à esquerda da <div>que se estenda apenas na metade do caminho.

Existe alguma maneira de fazer isso sem adicionar elementos extras na página?

Espero que isto ajude:

#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>

O conteúdo gerado por CSS pode resolver isso para você:

div {
  position: relative;
}


/* Main div for border to extend to 50% from bottom left corner */

div:after {
  content: "";
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 1px;
}

<div>Lorem Ipsum</div>

(nota - a content: "";declaração é necessária para que o pseudoelemento seja renderizado)

The :afterrocks :)

Se você tocar um pouco, poderá definir o elemento de borda redimensionada para aparecer centralizado ou para aparecer apenas se houver outro elemento próximo a ele (como nos menus). Aqui está um exemplo com um menu:

#menu > ul > li {
    position: relative;
    float: left;
    padding: 0 10px;
}

#menu > ul > li + li:after {
    content:"";
    background: #ccc;
    position: absolute;
    bottom: 25%;
    left: 0;
    height: 50%;
    width: 1px;
}

#menu > ul > li {
  position: relative;
  float: left;
  padding: 0 10px;
  list-style: none;
}
#menu > ul > li + li:after {
  content: "";
  background: #ccc;
  position: absolute;
  bottom: 25%;
  left: 0;
  height: 50%;
  width: 1px;
}

<div id="menu">
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
  </ul>
</div>

Com propriedades CSS, podemos controlar apenas a espessura da borda; não comprimento.

No entanto, podemos imitar o efeito de borda e controlar seu widthe heightcomo queremos de outras maneiras.

Com CSS (gradiente linear):

Podemos usar linear-gradient()para criar uma imagem de fundo e controlar seu tamanho e posição com CSS para que pareça uma borda. Como podemos aplicar várias imagens de plano de fundo a um elemento, podemos usar esse recurso para criar várias bordas como imagens e aplicar em diferentes lados do elemento. Também podemos cobrir a área restante disponível com algumas cores sólidas, gradientes ou imagens de fundo.

HTML necessário:

Tudo o que precisamos é de apenas um elemento (possivelmente tendo alguma classe).

<div class="box"></div>

Passos:

1. Crie imagem (s) de fundo com linear-gradient().
2. Use background-sizepara ajustar as width/ heightdas imagens criadas acima para que pareçam uma borda.
3. Uso background-positionpara ajustar a posição (como left, right, left bottometc.) dos acima fronteira criado (s).

CSS necessário:

.box {
  background-image: linear-gradient(purple, purple),
                    // Above css will create background image that looks like a border.
                    linear-gradient(steelblue, steelblue);
                    // This will create background image for the container.

  background-repeat: no-repeat;

  /* First sizing pair (4px 50%) will define the size of the border i.e border
     will be of having 4px width and 50% height. */
  /* 2nd pair will define the size of stretched background image. */
  background-size: 4px 50%, calc(100% - 4px) 100%;

  /* Similar to size, first pair will define the position of the border
     and 2nd one for the container background */
  background-position: left bottom, 4px 0;
}

Exemplos:

Com linear-gradient()isso, podemos criar bordas de cores sólidas e também ter gradientes. Abaixo estão alguns exemplos de bordas criadas com este método.

Exemplo com borda aplicada apenas em um lado:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, calc(100% - 4px) 100%;
  background-position: left bottom, 4px 0;

  height: 160px;
  width: 160px;
  margin: 20px;
}
.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(steelblue, steelblue);
}

<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

Exemplo com borda aplicada nos dois lados:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 4px 50%, calc(100% - 8px) 100%;
  background-position: left bottom, right top, 4px 0;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(purple, red),
                    linear-gradient(steelblue, steelblue);
}

<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

Exemplo com borda aplicada em todos os lados:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 50% 4px, 4px 50%, 50% 4px, calc(100% - 8px) calc(100% - 8px);
  background-position: left bottom, left bottom, right top, right top, 4px 4px;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(to right, purple, red),
                    linear-gradient(to bottom, purple, red),
                    linear-gradient(to left, purple, red),
                    linear-gradient(steelblue, steelblue);
}

<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

Captura de tela:

para linhas horizontais, você pode usar a tag hr:

hr { width: 90%; }

mas não é possível limitar a altura da borda. apenas altura do elemento.

As bordas são definidas apenas por lado, não em frações de um lado. Então, não, você não pode fazer isso.

Além disso, um novo elemento também não seria uma fronteira, simularia apenas o comportamento que você deseja - mas ainda assim seria um elemento.

Outra maneira de fazer isso é usar imagem de borda em combinação com um gradiente linear.

div {
  width: 100px;
  height: 75px;
  background-color: green;
  background-clip: content-box; /* so that the background color is not below the border */
  
  border-left: 5px solid black;
  border-image: linear-gradient(to top, #000 50%, rgba(0,0,0,0) 50%); /* to top - at 50% transparent */
  border-image-slice: 1;
}

<div></div>

jsfiddle: https://jsfiddle.net/u7zq0amc/1/

Suporte para Navegador: IE: 11+

Chrome: todos

Firefox: 15+

Para um melhor suporte, adicione também prefixos de fornecedores.

caniuse border-image

Este é um truque de CSS, não uma solução formal. Deixo o código com o período em preto porque me ajuda a posicionar o elemento. Posteriormente, pinte seu conteúdo (cor: branco) e (margem superior: -5px ou mais) para torná-lo como se o período não estivesse lá.

div.yourdivname:after {
content: ".";
  border-bottom:1px solid grey;
  width:60%;
  display:block;
  margin:0 auto;
}

Outra solução é usar uma imagem de plano de fundo para imitar a aparência de uma borda esquerda

1. Crie o estilo da borda esquerda que você precisa como gráfico
2. Posicione-o à esquerda de sua div (deixe o tempo suficiente para lidar com aproximadamente dois aumentos de tamanho de texto em navegadores antigos)
3. Defina a posição vertical 50% da parte superior da sua div.

Você pode precisar ajustar o IE (como de costume), mas vale a pena tentar se esse é o design que você deseja.

• Geralmente sou contra o uso de imagens para algo que o CSS fornece inerentemente, mas às vezes se o design precisar, não há outra maneira de contorná-lo.

Você pode definir apenas uma borda por lado. Você teria que adicionar um elemento extra para isso!