<div class="examples">
  <section>
  <p class="item">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium quod ullam molestiae repudiandae eveniet esse fugit eligendi tempore? Dolorum debitis mollitia rerum velit ipsum dolor veniam ab ipsam corporis adipisci!
</p>
<button class="btn">button</button>
</section>
  
    <section>
  <p class="item" style="background: #bebebe;">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium quod ullam molestiae repudiandae eveniet esse fugit eligendi tempore? Dolorum debitis mollitia rerum velit ipsum dolor veniam ab ipsam corporis adipisci!
</p>
<button class="btn">button</button>
</section>
  
  <section style="background: #fff; color: #333">
  <p class="item">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium quod ullam molestiae repudiandae eveniet esse fugit eligendi tempore? Dolorum debitis mollitia rerum velit ipsum dolor veniam ab ipsam corporis adipisci!
</p>
<button class="btn">button</button>
</section>

<section style="background: #fff; color: #333">
  <p class="item" style="background: #eee;">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium quod ullam molestiae repudiandae eveniet esse fugit eligendi tempore? Dolorum debitis mollitia rerum velit ipsum dolor veniam ab ipsam corporis adipisci!
</p>
<button class="btn">button</button>
</section>

<section style="background: #333; color: #fff">
  <p class="item">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium quod ullam molestiae repudiandae eveniet esse fugit eligendi tempore? Dolorum debitis mollitia rerum velit ipsum dolor veniam ab ipsam corporis adipisci!
</p>
<button class="btn">button</button>
</section>

<section style="background: #333; color: #fff">
  <p class="item" style="background: #222;">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium quod ullam molestiae repudiandae eveniet esse fugit eligendi tempore? Dolorum debitis mollitia rerum velit ipsum dolor veniam ab ipsam corporis adipisci!
</p>
<button class="btn">button</button>
</section>
</div>

<section class="description">
  <h2>Трюк с маской</h2>
  <p>Для этого решения мы также будем использовать псевдоэлемент и свойство mask для обрезки фона </p>
  <p>Поддержка mask: <a href="https://caniuse.com/css-masks">https://caniuse.com/css-masks</a>.</p>
  <p>Установим фон элемента как градиент. А затем, используя свойство mask, укажем еще два градиентных фона (того же цвета, что и body). Первый будет маскировать (покрывать) область в пределах границ отступа, а второй маскировать (покрывать) область вплоть до границы.</p>
  <p>Кроме того, нужно установить <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite">mask-composite</a>, чтобы исключить верхний слой из нижнего, чтобы увидеть границу.</p>
  <p>Стили инлайном в примерах нужны только для того, чтобы показать разные цветовые решения. В реальной жизни их нужно задавать классами.</p>
  <p>Другие варианты решения на <a href="https://sitist.ru/info-gradient-border.htm">sitist.ru</a></p>
</section>

@import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap");

:root {
  --border-w: 3px;
}

.item {
  position: relative;
  padding: 20px;
  margin: 20px 0;
  border-radius: 10px;
}

.item::before {
  content: "";
  position: absolute;
  inset: calc(0px - var(--border-w));
  /*
  если нет поддержки inset:
  top: var(--border-w);
  left: var(--border-w);
  right: var(--border-w);
  bottom: var(--border-w);
  */
  border-radius: 15px;
  padding: 3px;
  background: linear-gradient(180deg, rgb(42, 218, 204), rgb(23, 30, 36));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.btn {
  position: relative;
  padding: 15px 20px;
  margin-top: 20px;
  border: 0;
  border-radius: 50px;
  font-size: 20px;
  font-family: inherit;
  color: inherit;
  background: none;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50px;
  border: var(--border-w) solid transparent;
  background: linear-gradient(45deg, purple, orange) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.btn:hover::before {
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  line-height: 1.5;
  font-family: Raleway, sans-serif;
  background: #dadada;
}

.examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.examples section {
  padding: 20px;
  border-radius: 4px;
}

.description {
  padding: 20px 40px;
}