Как реализовать такую рамку на СSS?
А если нужен прозрачный фон в заголовке, делай три 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;
}
А если нужен прозрачный фон в заголовке, делай три 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;
}