Почему не получается сделать бордер с градиентом?

Question

Почему не получается сделать бордер с градиентом? Как я понял, цвет заднего фона не хочет выходить на передний план. Причем в примере, который я нашел, все работает

Сам сайт cw51830.tmweb.ru

Весь код jsfiddle.net/a7bqjLro/

Пример jsfiddle.net/uyo23h6a/

Должно получится вот так

У меня вот так

Answer 1

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

.banner__info-age {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 24px;
    border-radius: 30px;
    color: #fff;
    z-index: 1;
}
.banner__info-age::before {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
    background: linear-gradient(90deg, #26fff2 0%, #326cff 35%);
    border-radius: 34px;
    z-index: -1;
}
.banner__info-age span{
    background: #000;
    padding: 0 12px;
    border-radius: 30px;
}

<span class="banner__info-age"><span>18+</span></span>

Answer 2

Бордер с градиентом обычно делается при помощи border-image, но оно не работает с border-radius.
По этому используем трюк, в котором будем "имитировать" бордер и его скругление.
Подойдёт только в случае, если фон под кнопкой будет однотонный.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  background: #000;
}

.border {
  display: inline-block;
  border-radius: 100px;
  --border-width: 5px;
  border: var(--border-width) solid transparent;
  background: #000;
  padding: .15em .75em;
  background-clip: padding-box;
  box-sizing: border-box;
  position: relative;
  /**/
  font-weight: bold;
  font-size: 10vw;
  line-height: 1;
  color: #fff;
}

.border::before {
  content: '';
  display: block;
  border-radius: inherit;
  background: linear-gradient(135deg, #2f6df4, #32faf0);
  margin: calc(var(--border-width) * -1);
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: -1;
}

<div class="border">18+</div>

БЛОГ НА HUSL

Почему не получается сделать бордер с градиентом?

Ответы (2 шт):