Как я могу создать такой текст с таким бордером?

Question

[sidina123]

Answer 1

[Николай]

codepen.io/anon/pen/pvZgMb

Answer 2

[Defman21]

Как вариант:

<div id="block"><span id="text">Frontable</span></div>

div#block {
  padding: 10px 0;
  box-shadow: inset 0 0 0px 3px red;
}
div#block #text {
  width: 100%;
  background: #fff;
  display: block
}

Answer 3

[fetis26]

Это явно логотип. Не уверен, что его нужно делать именно текстом -- потеряется начертание текстом от дизайнера

Comments

[M-ka]

всегда можно подключить шрифты) которые у части пользователей будут успешно заблокированы)))
И да, согласен, лого должно быть картинкой)
А еще лого можно оживить в фотожопе или гимпе через гиф) (хотя и пнг с недавних пор начало поддерживать анимацию но не все браузеры еще начали поддерживать такие пнг)

Answer 4

[Дмитрий]

1. фоном
2. несколькими слоями

Answer 5

[M-ka]

1. див обертка с релативом
2. див(можно Р, но блочный) с нижним текстом, релатив, зиндекс + несколько
3. див с с задаными габаритам, бордером, абсолют, зиндекс ниже №2
4. див(или что то другое но блочное) с текстом, белый фон, абсолют, зиндекс больше №2
ну по ходу еще всякие топы, лефты бегать будут....
Можно уменьшить на один отдельный блок, за счет того, что бы №4 поместить в № 2, но тогда релативы, падинги...
еще можно упростить использовав бефор и афтер, но тогда не во всех браузерах отработает... все зависит от того, на сколько нужно, ну то такое....

Answer 6

[Алексей Яхненко]

В фотошопе же.

Answer 7

[Oleg Shevelev]

<style>
.logo {
    color: #7073f2;
    display: table;
    font-family: monospace;
    font-size: 50px;
    border:none;
    padding: 0px;
    overflow: hidden;
}
.logo:before {
    content: "";
    border: 2px solid #7073f2;
    border-bottom: none;
    display: block;
    padding-top: 10px;
}
.logo:after {
    content: "";
    border: 2px solid #7073f2;
    border-top: none;
    display: block;
    padding-top: 10px;
}
.logo span {
    margin-left: -5px;
    margin-right: -5px;
}
</style>
<p class="logo"><span>FRONTALLE</span></p>

Есть небольшая проблема... у шрифта без засечек слева и справа существует небольшой отступ от краёв. letter-spacing и word-spacing в этом случае не помогают, по этому добавил span с отрицательными отступами. Проблема проявляется в: div, p, table tr/td и, вероятно, в других тегах в не зависимости от их свойств вроде border-collapse, border-spacing, float: left и прочее что подвернулось под руку.

Если знаете более удачное решение - дайте мне знать. Так как текущее никуда не годится.

Предыдущие предложения так же не учитывают эту проблему. Будьте внимательнее.