2

Estou usando uma linear-gradient como border-imagem em um elemento, mas dessa forma a borda não respeita o border-radius que coloquei e não realiza a curvatura nos vértices.

Eu gostaria que ficasse assim: inserir a descrição da imagem aqui

Mas está ficando assim: inserir a descrição da imagem aqui

Aqui está o código referente a imagem acima. Deixei o box-shadow para vcs verem que o elemento .box está com o border-radius funcionando corretamente, mas o border-imagem não respeita esse border-radius e continua sem realizar curvatura nos vértices.

Como posso corrigir isso? (sem ser com SVG)

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
}

.box {
  position: relative;
  width: 400px;
  height: 160px;
  margin: auto;	
  border: 2px solid;
  border-image: linear-gradient(red, blue);
  border-image-slice: 1;
  border-radius: 20px;

  box-shadow: 0 0 0 1px green;
}
<div class="box"></div>

1 Resposta 1

2

Olá, tudo bem?

Tente a seguinte abordagem, por favor:

Já tive o mesmo problema algum tempo atrás e formulei minha solução com base neste tópico https://gist.github.com/stereokai/36dc0095b9d24ce93b045e2ddc60d7a0

Simplifiquei a edição da resposta, foi utilizado o border com double para duplicar a espessura e transparent para inibir a cor default. Desta forma utilizamos via background-image as novas cores, sendo que o linear-gradient contempla o preenchimento interno da e o radial-gradient (podendo ser aqui também linear, como preferir) fica responsável pela cor da borda, Background-origin com border-box define a área de posicionamento do plano de fundo. O Background-clip: content-box., o fundo é desenhado dentro (cortado) a caixa de conteúdo, já border-box também aplicado aqui, o fundo se extende até fora da fronteira da borda (mas por baixo da borda na ordenação-z). Espero ter ajudado.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
}

.box {
  position: relative;
  width: 400px;
  height: 160px;
  margin: auto;	
  border: double 2px transparent;
  border-radius: 20px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, red, blue);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
<div class="box"></div>

4
  • 3
    Amigo seria interessante vc colocar detalhes do que fez, apesar de parece correto eu não entendi o que foi feito e não quero dar só um crtl+c/v sem entender o que foi feito ai. Se vc copiou o código de algum lugar seria interessante vc citar a fonte
    – hugocsl
    2/01/2019 às 13:02
  • Simplifiquei a edição da resposta, foi utilizado o border com double para duplicar a espessura e transparent para inibir a cor default. Desta forma utilizamos via background-image as novas cores, sendo que o linear-gradient contempla o preenchimento interno da <div> e o radial-gradient fica responsávle pela cor da borda. Background-origin com border-box define a área de posicionamento do plano de fundo. Espero ter ajudado :) 2/01/2019 às 13:21
  • 1
    Desculpe amigo mas continuei sem entender... Porque radial-gradient e não o linear-gradiente? E o background-clip não serve pra nada? Seria interessante vc adicionar uma explicação no campo da resposta e não aqui no comentário, acho que fica melhor para quem tiver a mesma dúvida poder ver direito sem precisa ler os comments aqui
    – hugocsl
    2/01/2019 às 13:52
  • Sim amigo, vou editar novamente e tentar abordar uma explicação mais coerente, obrigado pelo feedback, espero poder ajudar. 2/01/2019 às 15:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .