JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bkt">
     КАТЕГОРИЯ 1 текст текст текст
</div>

CSS

.bkt {
    font-size: 16px;
	text-align: center;
	width: 70%;
	float: left;
	line-height: 1;
    
    border: 3px solid #000;
    position: relative;
    padding: 10px;
}

.bkt::before, .bkt::after {
    content: '';
    position: absolute;
    background: #f00;
    left: 10px; right: 10px;
    height: 3px;
    z-index: 2;    
}

.bkt::before {
    top: -3px; 
}

.bkt::after {
    bottom: -3px;
}