Назарий Лазарчук

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

.квадрат {
position: relative; // или absolute
border: 4px solid yellow;
border-left: none;
width: ...;
height: ...;
}
.квадрат::before, .квадрат::after {
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  background: yellow;
}
.квадрат::before {
  top: 0;
  height: ...;
}
.квадрат::after{
  bottom: 0;
  height: ...;
}

Для начала, в форму необходимо добавить поля для редактирования в форму и заполнить их атрибут defaultValue через JS:

<form class="form" id="form">
            <button class="profile__buttonClose"></button>
          
          <label>
            Имя
            <input type="text" name="firstname"/>
          </label>
          <label>
            Описание
            <input type="text" name="description"/>
          </label>

          
            <button class="form__sumbit-button" type="submit">
                <h3 class="form__save">Сохранить</h3>

            </button>
        </form>

document.querySelector('input[name="firstname"]').defaultValue = 'Старое значение поля Firstname'
document.querySelector('input[name="description"]').defaultValue = 'Старое значение поля Description'

Далее, необходимо сделать нужный запрос. Если перезагрузка сайта нужна, тогда просто указываем адресс в атрибутах
<form action="..." method="..." ... >. Но если нужен асинхронный запрос, тогда делаем его через JS (в таком случае это называют AJAX), для этого можно найти сотни-тысяч примеров на codepen

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const firstname = document.querySelector('input[name="firstname"]').value;
  const description= document.querySelector('input[name="description"]').value;
  fetch('....', { body: JSON.stringify({ firstname, description}) }) // как-то так примерно, тут от ситуации
});