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

#html #css

Есть кнопка и под кнопкой есть фон(картинка), нужно сделать градиент у border и сделать
его круглым, и чтобы фон(картинка) была видна.
Здесь фон непрозрачный у div.



.rounded-corners-gradient-borders {
  width: 300px;
  height: 80px;
  border: double 4px transparent;
  border-radius: 80px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top
left, #f00,#3020ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
}




    

Ответы

Ответ 1

.rounded-corners-gradient-borders {
  width: 250px;
  padding: 15px;
  border-left: 2px solid #f00;
  border-right: 2px solid #3020ff;
  background-image: linear-gradient(45deg, #f00, #3020ff), linear-gradient(45deg,
#f00, #3020ff);
  background-size: 100% 2px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  border-radius: 35px;
  text-align: center;
  font-weight: bold;
  font-family: Arial;
}

.img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

  Some text






Можно попробовать с box-shadow:



.box {
  width: 250px;
  margin: 2rem 0;
  background: transparent;
  border-radius: 25px;
  text-align: center;
  padding: 15px;
}

.gradient {
  box-shadow: -2px 0 0 2px rgba(255, 0, 0, 0.8), -2px -2px 0 2px rgba(48, 32, 255,
0.3), -2px 2px 0 2px rgba(48, 32, 255, 1), 0 -2px 0 2px rgba(48, 32, 255, 1), 0 2px
0 2px rgba(48, 32, 255, 1), 2px -2px 0 2px rgba(48, 32, 255, 1), 2px 2px 0 2px rgba(48,
32, 255, 1), 2px 0 0 2px rgba(255, 0, 0, 1);
}

img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
Some text



Ответ 2

Решение на svg .



*{
  box-sizing:border-box;
}
body{
  margin:0;
  background:linear-gradient(to right, #ddd,#cda);
  min-height:100vh;
}
.btn{
  display:inline-block;
  position:relative;
  padding:0 15px;
  text-align:center;
  width:200px;
  line-height:40px;
  cursor:pointer;
  user-select:none;
  font-weight:bold;
}
.btn__border{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.btn__border rect{
  fill:none;
  stroke:url(#gradient);
  stroke-width:3px;
  width:calc(100% - 6px);
  height:calc(100% - 6px);
}
.btn:hover rect{
  stroke:green;
}



  
  Кнопка



  
  Ещё кнопка