Как сделать такой custom border?

Чтобы создать кастомную границу в CSS, можно использовать несколько различных подходов, в зависимости от требуемого внешнего вида.

1. Использование фонового изображения:
- Для начала нужно создать изображение, которое будет использоваться в качестве границы. Например, можно создать изображение в формате PNG с прозрачным фоном и нарисовать на нем необходимый паттерн границы.
- Затем, в CSS, можно использовать свойство border-image для задания изображения в качестве границы.

Пример использования фонового изображения для создания кастомной границы:

   .custom-border {
     border-image: url(path/to/image.png) 20 repeat;
     border-width: 20px;
   }

2. Использование псевдоэлементов:
- В CSS можно использовать псевдоэлементы before и after для создания кастомной границы.
- Сначала нужно задать основной стиль для элемента, например, просто цвет фона и ширину.
- Затем, с помощью псевдоэлементов, можно создать дополнительные границы с помощью свойств content, position, border, width, height и других.

Пример использования псевдоэлементов для создания кастомной границы:

   .custom-border {
     position: relative;
     background-color: #f0f0f0;
     width: 300px;
     height: 200px;
   }
   
   .custom-border::before,
   .custom-border::after {
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
   }
   
   .custom-border::before {
     left: 0;
     border-left: 5px solid red;
   }
   
   .custom-border::after {
     right: 0;
     border-right: 5px solid blue;
   }

3. Использование градиентов:
- Можно также создать кастомную границу с помощью градиентов.
- Нужно задать градиентное свойство background-image соответствующего элемента.

Пример использования градиентов для создания кастомной границы:

   .custom-border {
     background-image: linear-gradient(to right, red, yellow, green);
     border: 3px solid transparent;
   }

Однако важно понимать, что все перечисленные методы могут быть настроены дополнительно для достижения точного внешнего вида и требований вашего проекта.