Как создать рамку input с углами разного размера?

Question

Я разрабатываю input с помощью CSS. Я очень старался, но так и не смог добиться результата как на картинке.

Как я могу сделать уголки input с помощью CSS, как показано на картинке?

body{
 background:black;
}

.form-control{
    background: #0A131B;
    border: 2px solid #08D1FF;
    outline: none;
    color: white;
    padding: 5px 7px;
    font-size: 16px;
    font-family: nebularegular, sans-serif;
}

.form-group label{
    color: white;
    font-size: 13px;
    display: block;
    margin-left: 5px;
    margin-bottom: 5px;
}

<div class="form-group">
 <label>Email address</label>
 <input type="text" class="form-control">
</div>

_{Свободный перевод вопроса How to create input frame with corners having different size? от участника @Alex Denial.}

Answer 1

несколько background могут сделать это. Я добавлю дополнительный контейнер, чтобы избежать очень большого определения background, но это можно сделать и без дополнительного контейнера:

body {
  background: black;
}
.input {
  display:inline-block;
  border: 1px solid transparent; /*пространство для градиента */
  background:
      linear-gradient(#08D1FF 0 0) top left,
      linear-gradient(#08D1FF 0 0) top left,
      linear-gradient(#08D1FF 0 0) bottom left,
      linear-gradient(#08D1FF 0 0) bottom left,
      linear-gradient(#08D1FF 0 0) bottom right,
      linear-gradient(#08D1FF 0 0) bottom right,
      linear-gradient(#08D1FF 0 0) top right,
      linear-gradient(#08D1FF 0 0) top right;
  background-size:1px 8px,8px 1px; /* 1px = ширина границы (толщина) | 8px = длина*/
  background-origin:border-box;
  background-repeat:no-repeat;
}
.form-control {
  border: 4px solid transparent; /* пространство для градиента + промежуток между box-shadow */
  background: inherit; /* мы наследуем то же самое */
  background-size:2px 15px,15px 2px;  /* 2px = толщина | 15 пикселей = длина*/
  box-shadow:0 0 0 2px #08D1FF inset; /* внутренняя граница, созданная с помощью тени */
  
  outline: none;
  color: white;
  padding: 5px 7px;
  font-size: 36px;
  font-family: nebularegular, sans-serif;
}

.form-group label {
  color: white;
  font-size: 13px;
  display: block;
  margin-left: 5px;
  margin-bottom: 5px;
}

<div class="form-group">
  <label>Email address</label>
  <div class="input">
  <input type="text" class="form-control">
  </div>
</div>

Без дополнительного контейнера (не рекомендую ...)

body {
  background: black;
}
.input {
  --c:#08D1FF; /* color */
  --ot:1px; /* outer border thickness */
  --ol:8px; /* outer border length */
  --it:2px; /* inner border thickness */
  --il:15px; /* inner border length */
  --g:3px;  /* the gap*/
  --b:2px;  /* the inside border*/
  
  --l:linear-gradient(var(--c) 0 0);
  display:inline-block;
  padding: var(--ot); 
  background:
      var(--l) 0    0   ,var(--l) 0    0,
      var(--l) 100% 0   ,var(--l) 100% 0,
      var(--l) 0    100%,var(--l) 0    100%,
      var(--l) 100% 100%,var(--l) 100% 100%;
  background-size:var(--ot) var(--ol),var(--ol) var(--ot); 
  background-repeat:no-repeat;
  margin:5px;
}
.form-control {
  border: calc(var(--g) + var(--it)) solid transparent; 
  background: inherit; 
  background-origin:border-box;
  background-size:var(--it) var(--il),var(--il) var(--it); 
  box-shadow:0 0 0 var(--b) var(--c) inset;
  
  outline: none;
  color: white;
  padding: 5px 7px;
  font-size: 36px;
}

<div class="input">
  <input type="text" class="form-control">
</div>

<div class="input" style="--c:red;--g:5px;--il:20px;--ot:2px;--b:4px">
  <input type="text" class="form-control">
</div>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

Как создать рамку input с углами разного размера?

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