Gere bordas gradiente CSS com pré-visualização ao vivo. Suporta border-radius usando a técnica background-clip.
Configurações do Gradiente
Início
Fim
border-radius só funciona com o método background-clip.
Usada no método background-clip para preencher o interior do elemento.
Pré-visualização
border-image (somente quadrado)
Seu Elemento
background-clip (com border-radius)
Seu Elemento
border-image(sem border-radius)
.element {
border: 3px solid transparent;
border-image: linear-gradient(90deg, #6366f1, #ec4899) 1;
/* Note: border-radius does not work with border-image */
}background-clip(suporta border-radius)
.element {
border: 3px solid transparent;
border-radius: 12px;
background:
linear-gradient(#ffffff, #ffffff) padding-box,
linear-gradient(90deg, #6366f1, #ec4899) border-box;
}