2

Помогите, пожалуйста, как сделать такую обводку?

Я сделал border-bottom,left,right. А как сделать верхнюю часть и текст не понимаю. Знаю, что ::before и ::after, но все равно что-то не получается.

2 ответа 2

8

Используйте fieldset + legend:

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  background: #333;
}

input {
  height: 40px;
  display: block;
  width: 100%;
  margin: 10px 0;
  border-radius: 20px;
  border: none;
}

legend {
  color: #fff;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

form {
  margin: 50px;
  padding: 20px;
}

fieldset {
  border: 2px solid #fff;
  border-radius: 5px;
}
<form>
  <fieldset>
    <legend>Personalia:</legend>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text">
  </fieldset>
</form>

2

Конечно, ответ @HamSter оптимальный, и в вёрстке форм правильно использовать именно такой вариант. Но если Вам понадобится аналогичным образом стилизовать просто какие-нибудь дивы (а не формы), то псевдоэлементы вполне для этого годятся:

body {
  background-color: gray;
}
form {
  border: 2px solid white;
  border-top: 0;
  border-radius: 15px;
  padding: 30px 10px 10px;
  margin: 50px;
  width: 290px;
  position: relative;
}
form:after,
form:before {
  content: '';
  display: block;
  width: 70px;
  height: 30px;
  border-top: 2px solid white;
  position: absolute;
  top: 0;
}
form:before {
  border-left: 2px solid white;
  border-top-left-radius: 15px;
  left: -2px;
}
form:after {
  border-right: 2px solid white;
  border-top-right-radius: 15px;
  right: -2px;
}
span {
  color: white;
  position: absolute;
  top: -10px;
  left: 90px;
  font-family: Arial, sans-serif;
  font-size: 15px;
}
input {
  width: 240px;
  height: 20px;
  margin: 10px;
  border-radius: 10px;
  padding: 3px 15px;
  border: none;
  outline: none;
}
<form>
  <span>Заголовок формы:</span>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text">
</form>

2
  • Только вот текст уехал i.stack.imgur.com/p8MvH.png
    – andreymal
    18 дек 2018 в 8:54
  • 1
    @andreymal, не знаю - у меня всё нормально отображается. видимо, Вы не в хроме смотрите )) но это ведь всего лишь вопрос подгонки размера - можно сделать кроссбраузерно и даже адаптивно 18 дек 2018 в 8:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.