3

Hola estoy queriendo aplicar a una caja bordes redondeados con degradados pero no logro hacerlo, si bien el degradado lo aplica los bordes no, quisiera que quedarancomo el ejemplo que adjuntoimagen adjunta

.box {
  border: 2px solid green;  
  border-image-source: linear-gradient(#a42e6e, #783057);
  border-image-slice: 20;
  padding: 2em;
  -webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
  <div class="box">
    <h4 class="titulo-degradado-1">
      174
    </h4>
    <p>Atención al vecino</p>
  </div>

2
  • Hola, lo unico que necesitas son bordes redondeados degradados? te paso ejemplo si me dices que si
    – ByGroxD
    Commented el 5 dic. 2017 a las 15:17
  • Te dejo un ejemplo que hice son los bordes redondeados con degradado y el texto degradado codepen.io/ankynator/pen/zYoROQO Commented el 25 feb. 2021 a las 21:05

2 respuestas 2

1

Puedes ver ejemplos Aqui.

Espero que te pueda ayudar, Saludos.

2
  • Las respuestas no deben ser sólo un enlace porque con el tiempo podría dejar de estar accesible y ya no valdría. Además esos ejemplos no tienen bordes redondeados.
    – user7176
    Commented el 5 dic. 2017 a las 17:04
  • Muchas graciass
    – MarianoF
    Commented el 6 dic. 2017 a las 12:12
1

De esta forma lo puedes Manejar con tus colores. no tengo méritos en esta respuesta, te dejo el LINK de donde vi la información.

.box {
    position: relative;
    border: 4px solid transparent;
    border-radius: 16px;
    background: white;
    background-clip: padding-box;
    padding: 10px;
}


.box::after{

    position: absolute;
    top: -4px; bottom: -4px;
    left: -4px; right: -4px;
    background: linear-gradient(#a42e6e, #783057);
    content: '';
    z-index: -1;
    border-radius: 16px;

}
<div class="box">
    <h4 class="titulo-degradado-1">
      174
    </h4>
    <p>Atención al vecino</p>
  </div>

3
  • Muchas gracias Santiago
    – MarianoF
    Commented el 5 dic. 2017 a las 15:23
  • @blonfu tienes razon ya mismo lo corrijo Commented el 5 dic. 2017 a las 17:29
  • @MarianoFranco edite la respuesta para que puedas conservar el degradado. Commented el 5 dic. 2017 a las 17:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.