RAX7

В качестве идеи:

еще вариант

Попробуй doiuse, он использует для работы базу caniuse

Через border-image можно сделать border с градиентом
https://developer.mozilla.org/en-US/docs/Web/CSS/b...
https://jsfiddle.net/6ysw48gk/

+ полезная статья как сделать такое и многое другое https://habr.com/ru/post/349988/

https://codepen.io/anon/pen/mgZevB?editors=0100

.dropdown
	&:hover
		> .submenu, > .subsubmenu
			opacity: 1
			visibility: visible

https://codepen.io/anon/pen/XQLbzE

Верхний бордер сделай через псевдоэлементы before/after

У тебя инпут и кнопка inline-block элементы, поэтому между ними есть небольшой пробел.
https://htmlacademy.ru/blog/21-fighting-the-space-...

Опытным путем было установлено что сафари игнорирует CSS свойство color, если в качестве значения используется rgb() c дробными значениями.

color: rgb(37.916666666666664, 216.5, 16.583333333333332) /* не работает в Safari */

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

const toStr = ({r, g, b}) => `rgb(${parseInt(r)}, ${parseInt(g)}, ${parseInt(b)})`;

https://codepen.io/anon/pen/VNzBzZ
https://developer.mozilla.org/ru/docs/Web/CSS/Gene...

Так?