подскажите, как сделать скобки вокруг текста?

[bondplus]

Здравствуйте! извиняюсь за глупый вопрос, но совсем новичек и не могу придумать как сверстать такой элемент в макете:

 
Можно ли эти скобки сделать border ом? пытался найти, но так и не нашел как сделать такие границы. 
 
Сделал пока так: 

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

.title {	font-size: 16px;	text-align: center;	width: 70%;	float: left;	line-height: 1;}.bkt {	font-size: 25px;	float: left;}

Но вариант совсем корявый у родительского элемента размеры должны быть указаны, а они для каждой категории разные будут... 

Подскажите, как такое правильно сверстать?

[Vlad]

Если фон отноцветный, то можно часть рамки закрасить цветом фона через псевдоэлементы. Вот здесь красным закрасил для наглядности.

http://jsfiddle.net/zzm31dnt/

[sergeiko]

ВОзможно вариант не менее корявый, но попробуйте перед текстом и после него создать по блоку нужной ширины..и этим блокам задать нужные бордеры..Те-есть блоку перед текстом бордер слева-сверху-снизу, а блоку после текста бордер сверху-справа-снизу..

[bondplus]

Если фон отноцветный, то можно часть рамки закрасить цветом фона через псевдоэлементы. Вот здесь красным закрасил для наглядности.

http://jsfiddle.net/zzm31dnt/

спасибо большое, как раз то что нужно