Как реализовать border с дырой в одной из сторон?

Question

Как можно реализовать такую границу рваную? Особенно, если учесть, что проходит она не по границе блока, а залезает прилично дырявой стороной на соседний блок...

.form {
  width: 1340px;
  min-height: 273px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
}
.form__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 6px;
}
.form__input-wrapper {
  height: 56px;
  display: flex;
}
.form__text {
  width: 1133px;
  font-family: Raleway;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  padding: 49px 0px;
  border: 3px solid #421F8B;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-left: none;
}
.form__input {
  width: 334px;
  border: 2px solid #421F8B;
  border-radius: 3px;
}
.form__button {
  width: 208px;
}
.form__title {
  font-size: 30px;
  line-height: 40px;
  padding-bottom: 29px;
  padding-left: 132px;
}

<form class="form">
      <div class="form__content">
        <h2 class="form__title">Запишитесь на первую бесплатную консультацию</h2>
        <div class="form__input-wrapper">
          <input class="form__input">
          <button class="btn btn_dark form__button">Записаться</button>
        </div>
      </div>
      <p class="form__text">
        текст
      </p>
    </form>

Часть, которая текст обрамляет, сделала. А как эту с часть, на другой блок заползающую можно?

Answer 1

А если левый блок сделать с position absolute и просто сверху наложить.

Answer 2

div {
  position: relative;
  width: 400px;
  height: 180px;
  margin-left: 100px;
  border-radius: 0 20px 20px 0;
  border-right: 3px solid #421f8b;
  border-top: 3px solid #421f8b;
  border-bottom: 3px solid #421f8b;
}

div::before,
div::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  left: -25px;
  border-left: 3px solid #421f8b;
}

div::before {
  top: -3px;
  border-radius: 20px 0 0 0;
  border-top: 3px solid #421f8b;
}

div::after {
  bottom: -3px;
  border-radius: 0 0 0 20px;
  border-bottom: 3px solid #421f8b;
}

span {
  display: block;
  position: absolute;
  top: 40px;
  left: -100px;
  width: 400px;
  height: 100px;
}

<div><span>Запишитесь на первую<br>бесплатную консультацию</span></div>

БЛОГ НА HUSL

Как реализовать border с дырой в одной из сторон?

Ответы (2 шт):