Как сверстать такие кнопки с градиентом?

Может просто border-radius делать, он же работает и с нулевой границей и с border: none;

Или закруглять у родительского блока а во вложенном текст и градиентный фон?
Или делать градиентную заливку у родитея и padding 1px, а вложенный блок синенький с текстом.
Если хочешь, что-бы тут тебе помогли, то хотя-бы поделись тем, что у тебя есть и что не получается...
А так все мимо пробегут, таких вопросом очень много тут и понять сложно что хочет автор.

habrahabr.ru/post/140760/
css-tricks.com/examples/GradientBorder/

Проблема в градиентном бордере, верно?

Можно попробовать похимичить с border-image.

Если кнопка лежит на сплошном фоне - можно добавить ей элементa after или before нужного цвета, синего в вашем случае, и с позиционировать как надо, оставив торчать кусок градиента толщиной в нужный бордер.

Можно использовать svg

Есть несколько вариантов решения.
Вот ссылка https://www.hongkiat.com/blog/css-gradient-border/
1) через border-image играться
2) через первоэлементы after/before

Через псевдоэлементы: https://jsfiddle.net/q8pnt7bg/
border-image со скругленными углами не будет работать.

Альтернатива - svg

- А давайте потренируемся вместе? (глядишь и научимся)))
Пример, как работать с border-image:
- Ну вот, стиль для кнопки <div class="boxic"><b>- Тыц -</b></div> почти готов.
Кнопка имеет стили .boxic:hover{}, .boxic:active{} и cursor: pointer;