Как я могу переместить одну границу вниз

Вы можете использовать:

.container {position: relative; top: 30px;}

или:

.all {padding-top: 30px;}

Чтобы переместить только границу элемента .container вниз, не затрагивая контур .all , вы можете применить padding-top к .all .

.all {
  outline: 3px solid blue;
  height: 100vh;
  outline-offset: 5px;
  position: relative;
  padding-top:30px;
}

.container {
  border: 2px solid red;
  height: 600px;
  width: 335px;
}

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

Вместо этого используйте transform. Для абсолютного расстояния, которое вам нужно, translate — хороший выбор. Для этой ситуации tranform: translateY(*px) это выход.

Кстати, мы тоже можем комбинировать position с top left bottom right.

используйте position: relative в родительском узле, чтобы отметить место для использования top/left.

используйте position: absolute на узле, который вы хотите переместить, и top: 30px, чтобы переместить его на 30 пикселей вниз от родительского узла

.all {
  outline: 3px solid blue;
  height: 100vh;
  outline-offset: 5px;
  position: relative;
}

.container {
  border: 2px solid red;
  height: 600px;
  width: 335px;
  transform: translateY(200px);
}

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