Background для бордюров

Варианты оформления бордюров с помощью css-свойства border-image

HTML:

HTML код во всех примерах одинаковый

Линейный градиентный фон:

CSS:

Повторяющийся линейный градиентный фон:

CSS:

Радиальный градиентный фон:

CSS:

Повторяющийся радиальный градиентный фон:

CSS:

Графический фон:

CSS:

Конический градиентный фон:

Поддерживается не всеми браузерами, например мозиллой

CSS:

Смотрите также:

Вариант каменной кладки блоков и изображений без использования JS

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Антон:

    Добрый вечер.
    С ним не работает border-radius, или можно как-то совместить?

    Ответить
    • Alexander:

      Вложить в контейнер и закруглить его

      Ответить
  • Elen:

    Поддерживается не всеми браузерами, например мозиллой

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

    Ответить
  • Константин:

    Очень круто! И вкус, и техническая реализация. Благодарю!

    Ответить