Как сделать такую оберткудля формы?

Ссылка скопирована
6 марта 2026 1 ответ

Здравствуйте. подскажите пожалуйста, как сделать такой контур для формы?

Как сделать такую оберткудля формы?

Дополнительно:

С помощью сочетания линейного градиента и border-image
Статейка: https://sitist.ru/gradient-border.html

  • Ankhena , спасибо!
  • border-image
    https://nikitahl.com/gradient-border-css

    • спасибо!
    • MagnoliasFlwrs, если ответ помог - жмите соответствующие кнопки под ответом.
    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Антон С. Ответ

    Для создания обертки для формы на сайте можно использовать HTML и CSS. Вот пример кода, который поможет вам создать стильную обертку для вашей формы:

    HTML:

    <div class="form-wrapper">
     
        <!-- Здесь размещается содержимое вашей формы -->
     
    </div>

    <div class="form-wrapper"> <!-- Здесь размещается содержимое вашей формы --> </div>

    CSS:

    .form-wrapper {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f9f9f9;
    }
     
    .form-wrapper form {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: 10px;
    }
     
    .form-wrapper input,
    .form-wrapper select,
    .form-wrapper textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
     
    .form-wrapper button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
     
    .form-wrapper button:hover {
      background-color: #0056b3;
    }

    .form-wrapper { max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; background-color: #f9f9f9; } .form-wrapper form { display: grid; grid-template-columns: 1fr; grid-gap: 10px; } .form-wrapper input, .form-wrapper select, .form-wrapper textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .form-wrapper button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; } .form-wrapper button:hover { background-color: #0056b3; }

    Этот код создаст обертку для вашей формы с заданными стилями. Вы можете настроить ширину, отступы, цвета и другие параметры согласно вашим потребностям. Не забудьте подключить этот CSS файл к вашему HTML документу.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно