В своё время написал сообщение «Как подписать картинку?», где немного научил пользоваться рамками. А вот на вопрос, который вынес в заголовок, не ответил.


Как сделать такую конструкцию?

Нужно использовать примерно такой код:
<div style="border: 2px solid orange; width: 100px; text-align: center;"><b>Нужный текст</b></div>
Где параметр "style="border: 2px solid orange;" описывает свойства вашей рамки:
Первый параметр ("2px") - это её толщина.
Второй параметр ("solid") - это её тип.
Третий параметр ("orange") - её цвет.

Параметр "width: 100px" описывает ширину рамки (в пикселях).
Подробно про эти параметры рамки можно прочитать в сообщении, упомянутом в начале.

Параметр "text-align: center" описывает ориентацию текста внутри рамки.
Варианты: LI 5.09.15

• "left" - Выравнивание текста по левой границе;
• "right" - Выравнивание текста по правой границе;
• "center" - Выравнивание текста по центру;
• "justify" - Выравнивание текста по правой и левой границам.