Как сделать такой border?

Пример (+ данного решения: работает на любом фоне (градиент, изображение))

body { 
  background: #291923; 
} 
 
fieldset { 
  border-color: #fff; 
  border-style: solid; 
  border-width: 1px; 
  padding: 15px; 
  color: #fff; 
} 
 
legend { 
  text-align: center; 
  color: #fff; 
}

<fieldset> 
  <legend align="center">Заголовок</legend> 
 
  <p>Text</p> 
</fieldset>

Пример с градиентом

body { 
  height: 100vh; 
  background: linear-gradient(135deg, rgba(255,0,0,1) 0%,rgba(109,0,25,1) 100%); 
} 
 
fieldset { 
  border-color: #fff; 
  border-style: solid; 
  border-width: 1px; 
  padding: 15px; 
  color: #fff; 
} 
 
legend { 
  text-align: center; 
  color: #fff; 
}

<fieldset> 
  <legend align="center">Заголовок</legend> 
 
  <p>Text</p> 
</fieldset>

Один из способов

.boby { 
  background: white; 
  padding-top: 30px; 
} 
 
.cell { 
  height: 100px; 
  border: 1px solid red; 
  position: relative; 
} 
 
h1 { 
  position: absolute; 
  left: 50%; 
  top: -40px; 
  transform: translateX(-50%); 
  background: white; 
  padding: 0 30px; 
}

<div class="boby"> 
  <div class="cell"> 
    <h1>TЕКСТ</h1> 
  </div> 
</div>

вышло так

.home { 
  border:2px solid red; 
  position:relative; 
} 
.home h2{ 
 position:absolute; 
 top:-35px; 
 background:white; 
 left:50%; 
 margin-left:-60px; 
 width:90px; 
 text-align:center; 
}

<div class="home"> 
  <h2>TEXT</h2> 
  <p>text text text text text</p> 
</div>

Не совсем то, что тебе надо, наверное

https://jsfiddle.net/6fqLsj9s/

https://jsfiddle.net/6fqLsj9s/1/

HTML

<div class = 'cover-block'>
TEXT
</div>

CSS:

.cover-block:before,
.cover-block:after {
    content:                  '';
    z-index:                  2;
  display:           inline-block;
    position:                absolute;
    border-style:           solid;
    top:                          0px;  
}
.cover-block:before {
    left:                       0px;
    border-width:           50px 0px 50px 25px;
    border-color:           transparent transparent transparent black;
}
.cover-block:after {
    right:                      0px;
    border-width:           50px 25px 50px 0px;
    border-color:           transparent black transparent;
}

P.S.

Вот вариант с одним уголком-границей https://jsfiddle.net/6fqLsj9s/2/

Я наложил :after на :before, при этом :after на 1 пиксель меньше чем :before, а имеет цвет заднего фона, что дает иллюзию уголка.

Как сделать 2 уголка пока не знаю.

body {
  background: white;  
}
.cover-block {
  position: relative;
  width: 300px;
  height: 100px;
  border: 1px solid orange;
  border-left: none;
  text-align: center;
  line-height: 100px;
  color: black;
  font-size: 20px;
  font-family: calibri;
 }
.cover-block:before,
.cover-block:after {
    content:                  '';
  display:           block;
    position:                absolute;
    border-style:           solid;
  left:               0px;
}
.cover-block:before {
    top:                          0px;  
    border-width:           50px 0px 50px 25px;
    border-color:           transparent transparent transparent orange;
}
.cover-block:after {
  top:                1px;
    border-width:           49px 0px 49px 24px;
    border-color:           transparent transparent transparent white;
}

P.P.S.

2 уголка легко делается, если использовать не 1 div, а 3

<div>
    <div class = 'left'></div>
    <div class = 'content'>TEXT</div>
    <div class = 'right'></div>
</div>

и к каждому уголку применить код (чуть модифицированный), который я привел для одноуголкового примера.

P.P.P.S

Уф - получилось, как описал выше: https://jsfiddle.net/6fqLsj9s/3/

Пришлось ввести дополнительные блоки (2 штучки)

HTML:

<div class = 'cover-block'>
    <div class = 'left'></div>TEXT<div class = 'right'></div>
</div>

CSS:

body {
  background: white;  
}
.cover-block {
  position: relative;
  width: 300px;
  height: 100px;
  border: 1px solid orange;
  border-left: none;
  border-right: none;
  text-align: center;
  line-height: 100px;
  color: black;
  font-size: 20px;
  font-family: calibri;
 }
 .left,
 .right {
   position: absolute;
   top: 0px;
   width: 0px;
   height: 100%;
 }
.left {
  left: 0px;
}
.right {
  right: 0px;
}
.left:before,
.left:after,
.right:before,
.right:after {
    content:                  '';
  display:           block;
    position:                absolute;
    border-style:           solid;
}
.left:before,
.left:after {
  left:               0px;
}
.left:before {
    top:                          0px;  
    border-width:           50px 0px 50px 25px;
    border-color:           transparent transparent transparent orange;
}
.left:after {
  top:                1px;
    border-width:           49px 0px 49px 24px;
    border-color:           transparent transparent transparent white;
}
.right:before,
.right:after {
  right:               0px;
}
.right:before {
    top:                          0px;  
    border-width:           50px 25px 50px 0px;
    border-color:           transparent orange transparent transparent;
}
.right:after {
  top:                1px;
    border-width:           49px 24px 49px 0px;
    border-color:           transparent white transparent transparent;
}