Почему рамка с градиентом отображается точками в углах?

Question

[Torcher]

Почему если я использую градиент border-image - рамка отображается только точками в углах? При обычном border-color всё нормально.

border: 7px solid transparent;
border-image: linear-gradient(151.36deg, rgba(237, 2, 51, 0.8) 16.95%, rgba(0, 62, 183, 0.8) 96.59%);

border: 7px solid black;

Answer 1

[Николай]

border-image-slice: 1
Чтобы заданный градиент сместился или растянулся по всей границе.

Comments

[Torcher]

Работает, спасибо огромное!

Ещё такой вопрос: на что ругается вебшторм? Почему правило по его мнению перезаписывается?

[Ankhena]

Torcher, там же на скрине написано почему. border-image составное свойство и border-image-slice входит в него.

[SelenIT3]

Можно добавить эту единичку в сам шортхэнд, сразу после закрывающей скобки градиента. В современных браузерах можно вообще обойтись одним шортхэндом, border-image: linear-gradient(...) 1 / 7px; (безразмерная цифра до слеша — border-image-slice, размерность после слеша — border-image-width). и обойтись без отдельного невидимого border-а. Но для совместимости с более старыми версиями лучше его оставить.