Borda com várias cores com CSS
23d atrás
Neste tutorial, vamos utilizar a propriedade background-image do #CSS, para fazer uma borda com múltiplas cores em gradiente.
Diferente de usar border-image, essa técnica funciona com bordas arredondadas usando border-radius.
Vamos ao código, primeiro adicione a div que será estilizada:
<div></div>
No CSS, adicione o seguinte código:
div {
width: 200px;
height: 200px;
border: solid 10px transparent;
border-radius: 1em;
background-image:
linear-gradient(white, white),
linear-gradient(to right, #2196F3, #673AB7, #9C27B0, #E91E63);
background-origin: border-box;
background-clip: content-box, border-box;
}
A técnica consiste de criar uma borda com cor transparente, e usar um background-image com 2 níveis. Um para o corpo do elemento e outro para borda, que pode ser um grandiente com as cores que você preferir.
Confira abaixo o código completo e o resultado:
Comentários (0)