Задайте рамке ширину и сделайте её прозрачной — сквозь неё будет виден фон.
02
linear-gradient(#fff, #fff) padding-box
Первый слой — сплошной цвет подложки, ограниченный зоной padding.
03
linear-gradient(…) border-box
Второй слой — сам градиент, растянутый до внешнего края рамки.
04
border-radius: 14px
Скругление применится к обоим слоям сразу.
04
Частые ошибки
border-image и скругления
С border-image свойство border-radius игнорируется. Если нужны углы — используйте два фона.
Подложка не совпадает с фоном страницы
Первый слой должен быть цветом под карточкой, иначе вокруг содержимого появится заметная плашка.
Прозрачная карточка
Приём требует непрозрачной подложки. Для полупрозрачных карточек нужна маска (mask-composite) — это отдельная техника.
05
Частые вопросы
Так устроена спецификация: border-image заменяет обычную отрисовку рамки картинкой, а скругление углов к этой картинке не применяется. Поэтому градиентная рамка через border-image всегда получается с острыми углами, сколько ни задавай border-radius. Приём с двумя фонами из этого рецепта обходит ограничение: рамка остаётся прозрачной, а градиент рисуется фоном под ней, и скругление действует на оба слоя.
Приём с двумя фонами требует непрозрачной подложки, поэтому для прозрачной карточки нужна маска. Градиент кладут на псевдоэлемент ::before с padding, равным толщине рамки, и вырезают середину: mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0), плюс mask-composite: exclude и для Safari -webkit-mask-composite: xor. Остаётся только кольцо по краю, а под ним виден фон страницы.
Простой путь — растянуть второй слой через background-size: 200% 200% и двигать его background-position в @keyframes: первый слой с подложкой при этом не трогается. Эффект вращающейся рамки дают conic-gradient и переменная угла, объявленная через @property с синтаксисом angle: её значение браузер умеет анимировать. Это работает в Chrome 85+, Safari 16.4+ и Firefox 128+. Добавьте отключение для prefers-reduced-motion.
Толщину задаёт обычный border: 3px solid transparent — градиент виден ровно в этой полосе. Меняя число, вы меняете рамку, а фоновые слои подстраиваются сами, потому что привязаны к padding-box и border-box. Тонкая рамка в один-два пикселя хорошо смотрится с контрастными цветами, на толстой от шести пикселей заметен сам переход. Ползунок на этой странице меняет толщину от 1 до 12 пикселей.
Тем же приёмом с двумя фонами: подложкой станет цвет поля, а градиентный слой — рамкой. Удобно включать градиент только в фокусе: в обычном состоянии рамка серая, а в :focus-visible второй слой меняется на градиент. Не убирайте outline полностью без замены — градиентная рамка и есть замена, но она должна быть заметной: толщиной от двух пикселей и с контрастом не ниже 3:1 к фону.
Да: несколько фонов через запятую и ограничение слоя через padding-box и border-box браузеры поддерживают больше десяти лет, включая старые версии Safari и мобильные браузеры. Префиксы не нужны. Единственное, что может не сработать в старом браузере, — сам градиент с in oklch, поэтому для рамки разумно оставлять смешивание в sRGB или раскладывать переход на промежуточные точки.