Borda com várias cores com CSS

44d atrás

Ion

---

0 0

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: