Любой способ ограничить длину границы?

Сгенерированный CSS контент может решить это для вас:

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

(примечание - объявление content: ""; необходимо для отображения псевдоэлемента)

Скалы :after:)

Если вы немного поиграете, вы можете даже установить свой размерный элемент границы, чтобы он выглядел по центру или появляться только в том случае, если рядом с ним есть другой элемент (например, в меню). Вот пример с меню:

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

для горизонтальных линий вы можете использовать тег hr:

hr { width: 90%; }

но невозможно ограничить высоту границы. только высота элемента.

С свойствами CSS мы можем контролировать толщину границы; не длина.

Однако мы можем имитировать эффект границы и управлять его width и height, как мы хотим, с помощью других способов.

С CSS (линейный градиент):

Мы можем использовать linear-gradient() для создания фонового изображения (ов) и управления его размером и позицией с помощью CSS, чтобы он выглядел как граница. Поскольку мы можем применить несколько фоновых изображений к элементу, мы можем использовать эту функцию для создания нескольких изображений, похожих на границу, и применять их по разные стороны элемента. Мы также можем покрыть оставшуюся свободную область с определенным сплошным цветом, градиентом или фоновым изображением.

Требуемый HTML:

Все, что нам нужно, это только один элемент (возможно, имеющий некоторый класс).

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

Шаги:

• Создайте фоновое изображение с помощью linear-gradient().
• Используйте background-size для настройки width/height выше созданного изображения (ов), чтобы оно выглядело как граница.
• Используйте background-position для настройки позиции (например, left, right, left bottom и т.д.) созданной выше границы (ов).

Необходимый CSS:

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

<сильные > Примеры:

С помощью linear-gradient() мы можем создавать границы сплошного цвета, а также иметь градиенты. Ниже приведены некоторые примеры границ, созданных с помощью этого метода.

Пример с границей, применяемой только с одной стороны:

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

Пример с границей, нанесенной с двух сторон:

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

Пример с границей, применяемой со всех сторон:

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

Скриншот:

Границы определяются только на стороне, а не в долях стороны. Итак, нет, вы не можете этого сделать.

Кроме того, новый элемент также не будет границей, он будет только имитировать поведение, которое вы хотите, но оно все равно будет элементом.

Это трюк CSS, а не формальное решение. Я оставляю код с черным периодом, потому что он помогает мне позиционировать элемент. Затем покрасьте свой контент (цвет: белый) и (margin-top: -5px или около того), чтобы сделать так, как будто период не существует.

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

Другое решение - вы можете использовать фоновое изображение, чтобы имитировать внешний вид левой границы.

• Создайте стиль рамки, который вам нужен как графический
• Расположите его в самом левом углу вашего div (сделайте его достаточно длинным, чтобы обрабатывать примерно два размера текста для более старых браузеров).
• Установите вертикальное положение на 50% вверху вашего div.

Вам может потребоваться настроить IE (как обычно), но это стоит того, если вы планируете дизайн.

• Я вообще не использую изображения для чего-то, что присуще CSS, но иногда, если дизайн нуждается в этом, нет другого пути вокруг него.

Другой способ сделать это - использовать border-image в сочетании с линейным градиентом.

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/

Поддержка браузера: IE: 11 +

Chrome: все

Firefox: 15 +

Для лучшей поддержки также добавьте префиксы поставщика.

caniuse border-image

Вы можете определить только одну границу на стороне. Вам нужно будет добавить дополнительный элемент для этого!