¿Es posible utilizar border-radius junto con una imagen de borde que tiene un degradado?

Estoy diseñando un campo de entrada que tiene un borde redondeado (radio de borde) e intento agregar un degradado a dicho borde. Puedo hacer con éxito el degradado y el borde redondeado, sin embargo, ninguno de los dos funciona juntos. Puede ser redondeado sin degradado o un borde con degradado, pero sin esquinas redondeadas.

-webkit-border-radius: 5px;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;

¿Existe alguna forma de que ambas propiedades CSS funcionen juntas o no es posible?

Apr 19 '11 01:04 paulwilde

Trabajando en este mismo problema. Encontré una solución que no es SVG y que es más concisa que otras aquí:

div{
  width: 300px;
  height: 80px;
  border: double 1em transparent;
  border-radius: 30px;
  background-image: linear-gradient(white, white), 
                    linear-gradient(to right, green, gold);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

<div></div>

Expandir fragmento

Esta no es mi propia solución y la tomé de aquí: https://gist.github.com/stereokai/36dc0095b9d24ce93b045e2ddc60d7a0

Oct 29 '2018 01:10 alphazwest

Esto es posible y no requiere marcado adicional , sino que utiliza un ::afterpseudoelemento .

captura de pantalla

Implica poner un pseudoelemento con un fondo degradado debajo y recortarlo. Esto funciona en todos los navegadores actuales sin prefijos o hacks de proveedores (incluso IE), pero si desea admitir versiones antiguas de IE, debe considerar opciones de colores sólidos, javascript y/o extensiones MSIE CSS personalizadas (es decir, filterCSSPie- como trucos de vectores, etc.).

Aquí hay un ejemplo en vivo ( versión jsfiddle ):

@import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css');

html {
    /* just for showing that background doesn't need to be solid */
    background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%);
    padding: 10px;
}

.grounded-radiants {
    position: relative;
    border: 4px solid transparent;
    border-radius: 16px;
    background: linear-gradient(orange, violet);
    background-clip: padding-box;
    padding: 10px;
    /* just to show box-shadow still works fine */
    box-shadow: 0 3px 9px black, inset 0 0 9px white;
}

.grounded-radiants::after {
    position: absolute;
    top: -4px; bottom: -4px;
    left: -4px; right: -4px;
    background: linear-gradient(red, blue);
    content: '';
    z-index: -1;
    border-radius: 16px;
}

<p class="grounded-radiants">
    Some text is here.<br/>
    There's even a line break!<br/>
    so cool.
</p>

Expandir fragmento

El estilo adicional anterior es para mostrar:

Esto funciona con cualquier fondo.
Funciona bien con box-shadowo insetno
No requiere que agregues la sombra al pseudoelemento.

Nuevamente, esto funciona con los navegadores IE, Firefox y Webkit/Blink.

Mar 24 '2015 02:03 Camilo Martin

Ahora podemos usar la máscara para lograr esto fácilmente mientras tenemos transparencia y capacidad de respuesta.

.box {
  position: relative;
  padding: 20px 30px;
  margin: 5px;
  display: inline-block;
  font-size: 30px;
}

.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  padding: 10px; /* control the border thickness */
  background: linear-gradient(45deg, red, blue);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

<div class="box">
  Hello World
</div>

<div class="box">
  Hello World again
</div>
<div class="box">
  Hello World <br> two lines
</div>

Expandir fragmento

Más detalles: https://dev.to/afif/border-with-gradient-and-radius-387f

Apr 03 '2021 23:04 Temani Afif

Probablemente no sea posible, según las especificaciones del W3C:

Los fondos de un cuadro, pero no su imagen de borde, se recortan a la curva apropiada (según lo determinado por 'clip de fondo'). Otros efectos que se recortan en el borde o borde de relleno (como "desbordamiento" que no sean "visibles") también deben recortarse en la curva. El contenido de los elementos reemplazados siempre se recorta según la curva del borde del contenido. Además, el área fuera de la curva del borde no acepta eventos del mouse en nombre del elemento.

Es probable que esto se deba a que border-imagepueden adoptar algunos patrones potencialmente complicados. Si desea un borde de imagen redondeado, deberá crear uno usted mismo.

Apr 18 '2011 18:04 Shauna