Как сверстать такой border?

Question

[Hello00]

как правильно сверстать такой border ?

Пробовал задавать общий border у блока,после чего поднимал в верх h2, и менял у h2 background. Но это костыль,и при адаптиве все плывет.

Answer 1

[Михаил Власов]

Без fieldset:

Answer 2

[Владимир Проскурин]

Есть такая крутая парочка, как fieldset и legend. Вместе они могу решить вашу проблему.
https://jsfiddle.net/Vlad_IT/456or0gn/
задаете белый отступ через padding для legend, а рамочку через border для fieldset.
fieldset по спецификации создал для группировки полей ввода формы, поэтому для такой задачи его использовать не семантично. Можно сделать на флексах https://jsfiddle.net/jwux9kg0/5/

Comments

[Hello00]

спасибо

[Сергей delphinpro]

не к месту здесь fieldset

[Владимир Проскурин]

Сергей delphinpro, да, это не семантично, согласен. Но решение куда практичнее и проще, чем с накладыванием белого заголовка поверх рамок, которое нужно дорабатывать, ибо вдруг фон будет не белым, вдруг текста будет больше (он просто наложится на основной контент), адаптивность тоже кривая. Лучше тогда на флексах сделать https://jsfiddle.net/jwux9kg0/5/ тогда этих проблем не будет.

Answer 3

[неДоктор Стрэндж]

что-то наподобие такого?

https://codepen.io/pesockiy/pen/moezJw