1

Подскажите, пожалуйста, можно ли чисто на CSS сделать вот такую обводку блока, которая перерывается и на концах нее кружочки?

введите сюда описание изображения

введите сюда описание изображения

1

1 ответ 1

8

Пример

* {
  box-sizing: border-box;
  margin: 0;
}

.frame {
  border: 2px solid #00f;
  max-width: 500px;
  margin: 15px auto;
}

.frame__title {
  font-size: 18px;
  padding-left: 10px;
  padding-right: 10px;
}

.frame__title>span {
  display: inline-block;
  position: relative;
}

.frame__title>span:before,
.frame__title>span:after {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  background: #00f;
  border-radius: 50%;
}

.frame__title>span:after {
  left: auto;
  right: -10px;
}

.frame__content {
  padding: 15px;
  background: #f7f7f7;
}
<fieldset class="frame">
  <legend align="center" class="frame__title">
    <span>Title</span>
  </legend>
  <div class="frame__content">Content</div>
</fieldset>

2
  • скажи, пожалуйста, а есть возможность потом эту обводку еще и перевернуть, и заголовок чтобы был снизу? (добавил картинку) только код текущий не изменяй, добавь новый 5 янв 2018 в 10:25
  • 1
    вот пример - ru.stackoverflow.com/questions/760365/Обводка-вокруг-контента/…. Увы но legend не поддерживает bottom position
    – soledar10
    5 янв 2018 в 12:06

Ваш ответ

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

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