Округленная рамка с градиентом

Question

Вот HTML

<div class="status_wrapp"></div>

Вот CSS

.status_stars {
    display: block;
    height: 24px;
    border-radius: 48px;
    -webkit-border-radius: 48px;
    border-image-slice: 1;
    border-width: 2px;
    -webkit-border-width: 2px;
    border-style: solid;
    border-image-source: linear-gradient(to left, #FFED4F, #FFC34F);
    border-image-source: -webkit-linear-gradient(to left, #FFED4F, #FFC34F);
}

Получается вот так

А нужно вот так

Как сделать рамку с округленными углами?

Вот как нужно вообще по макету

Answer 1

Насколько я знаю, border-image не работает вместе со свойством border-radius в одном классе.

Можно решить данный вопрос через before

body {
  padding: 20px;
}

.circle {
  width: 200px;
  height: 75px;
  background: #673ab7;
  border-radius: 50px;
  position: relative;
  text-align: center;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
}

.circle::before {
  border-radius: 55px;
  position: absolute;
  content: '';
  background-image: linear-gradient(to bottom, #FFED4F 0%, #FFC34F 100%);
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  z-index: -1;
}

.circle::after {
  border-radius: 60px;
  position: absolute;
  content: '';
  background-image: linear-gradient(to bottom, #673ab7 0%, #673ab7 100%);
  top: -20px;
  left: -20px;
  bottom: -20px;
  right: -20px;
  z-index: -2;
}

.wrapp {
  display: flex;
  width: 100%;
  height: 300px;
  padding: 50px 0;
  justify-content: center;
  align-items: center;
}

<div class="wrapp">
  <div class="circle">Тест</div>
</div>

Answer 2

Я бы сделал следующим образом:

@import url('//fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0');

.violet-bg {background: linear-gradient(15deg, #7785f8, #74a1d3);}
.gold-bg {background: linear-gradient(15deg, #f5bf59, #f4e556);}

.button-star {
  display: inline-block;
  border-radius: 90px;
  overflow: hidden;
  padding: 5px;
  box-sizing: border-box;
}

.button-star__border {
  border-radius: 90px;
  padding: 2px;
  box-sizing: border-box;
}

.button-star__content {
  border-radius: 90px;
  padding: 5px 15px;
  box-sizing: border-box;
  color: #ffc34f;
  text-shadow: 0 0 2px #fff;
}

<div class="button-star violet-bg">
  <div class="button-star__border gold-bg">
    <div class="button-star__content violet-bg">
      <span class="material-symbols-outlined">star</span>
      <span class="material-symbols-outlined">star</span>
      <span class="material-symbols-outlined">star</span>
    </div>
  </div>
</div>

Answer 3

Вот вариант в 2 дива - каждая "обводка" рисуется под предыдущей за счет выступа. В коде есть комментарии.

.status_wrapper{
  display: inline-flex; 
  position: relative; /* для позиционирования :before */
  border-radius: 25px;
  padding: 2px; /* ширина внешней голубой обводки */
} 

.status_wrapper:before {
  content: "";
  z-index: -1; 
  position: absolute;
  top: 0px;   
  right: 0px;
  bottom: 0px;
  left: 0px;
  border-radius: inherit;
  background: rgb(2,0,36); /* фон обводки */
  background: linear-gradient(337deg, rgba(2,0,36,1) 0%, rgba(78,78,222,1) 35%, rgba(0,212,255,1) 100%);
}

.status_stars {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 5px 10px;
  box-sizing: border-box; /* включаем границу в размеры */
  color: gold;
  /* фон */
  background: rgb(2,0,36); 
  background: linear-gradient(337deg, rgba(2,0,36,1) 0%, rgba(78,78,222,1) 35%, rgba(0,212,255,1) 100%);
  background-clip: padding-box; /* под границей фон не рисуется */
  border: solid 2px transparent; /* делаем прозрачность для показа золотой обовдки */
  border-radius: 25px;
}
.status_stars:before {
  content: "";
  position: absolute;
  /* выступ золотой обводки из под фона */
  top: -2px;    
  right: -2px;  
  bottom: -2px; 
  left: -2px; 
  /* помещаем ее под фоном */  
  z-index: -1;  
  border-radius: inherit;
  background: linear-gradient(to right, yellow, orange); /* обводка */
}

<div class ="status_wrapper">
  <div class="status_stars">
    <span>★★★</span>
   </div>
</div>

<div class ="status_wrapper">
  <div class="status_stars">
    <span>★★&nbsp;</span>
   </div>
</div>

<div class ="status_wrapper">
  <div class="status_stars">
    <span>★</span>
   </div>
</div>

БЛОГ НА HUSL

Округленная рамка с градиентом

Ответы (3 шт):