Как сделать такую рамку в CSS?

Question

[Сергей Коноваленко]

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

Comments

[Сергей Коноваленко]

Php Storm, а если делать через тег fieldset, то тогда можно такое сделать?

[Сергей Коноваленко]

Php Storm, Спасибо, большое

[s-jet]

Сергей Коноваленко, а кругляши можно псведоэлементами сделать

[Ankhena]

Сергей Коноваленко,

Элемент <fieldset>предназначен для группирования элементов формы. Такая группировка облегчает работу с формами, содержащими большое число данных, например, один блок может быть предназначен для ввода текстовой информации, а другой — для флажков.

У вас форма? Нет.
Семантичное решение есть? Да.
Зачем городить помойку без необходимости?

Answer 1

[Ankhena]

Да, можно:
делала для другой задачи: https://jsfiddle.net/Ankhena/2xubg90z/
Для вашей больше подойдет так, попроще: https://jsfiddle.net/Ankhena/L8myb66u/

p.s. и не надо использовать fieldset, не по назначению и там где можно обойтись без него.

Comments

[Сергей Коноваленко]

Спасибо большое, Ankhena

Answer 2

[Александр]

делай заголовок с белым фоном и псевдоэлементами в виде кружков и позиционируй его поверх рамки

Answer 3

[aloky]

Примерно так: https://jsfiddle.net/aysyd5a1/