Как сделать Border для текста наполовину?

Question

[Rufix]

Необходимо сделать вот такой заголовок.


Как я понял делается он через border + градиент, но я так и не смог сделать подобное. Нужна помощь

Answer 1

[VeryLongAgoDid]

Не уверен что это можно сделать с самим бордер, но есть хитрость. Поместить любой элемент в этот блок (отлично подойдут псевдоэлементы) и задать рамку для них, кроме одной стороны.

div {
    position: relative;
}
div:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 97%;
    border: 3px solid #f00;
    border-radius: 10px 0 0 10px;
    border-right: none;
}

Если нужны коментарии по написанному - спрашивайте)

Comments

[Rufix]

Спасибо большое.

Answer 2

[xxx44552]

codepen.io