Как реализовать такую рамку на СSS?

Question

[Коля]

Добрый вечер, как сделають такую рамку вокруг блока?

Answer 1

[dm]

А если нужен прозрачный фон в заголовке, делай три border'а и добавляй вверху две черточки с помощью ::before и ::after

.block {
	position: relative;
	border-right: 2px solid black;
	border-left: 2px solid black;
	border-bottom: 2px solid black;
}
.block::before,
.block::after {
	position: absolute;
	content: "";
	width: 30px;
	height: 2px;
	top: 0;
	background: black;
}
.block::after {
	left: 0;
}
.block::before {
	right: 0;
}

Comments

[Сергей Горячев]

Простите за тупой вопрос, а в чем разница между .block:before и вашим .block::before? ИМею ввиду 2 двоеточия.

[dm]

Sergey Goryachev: Двойное двоеточие это новый синтаксис. Так сделали, чтобы было отличие между псевдоэлементами (before, after и др.) и псевдоклассами (hover, first-child и др.).
Написано только что

[Сергей Горячев]

dm: мерси большое) Буду пользовать)))

Answer 2

[Артур]

codepen.io/r3st1k25/pen/pjPLxV вот специальные теги для такого.