8

Eu tenho um elemento, mas queria que ele tivesse várias bordas. Não queria ter que usar várias divs para isso... Queria algo em torno de 10 a 8 bordas.

Existe alguma forma mais prática de colocar mais de um border e um elemento?

Exemplo do que não quero!

.container {
  border-color: #e3e3e3;
  width: 200px;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px;
}

.container div {
  height: 100%;
  width: 100%;
  position: absolute;
}

.container div:nth-child(1) {
  border: 20px solid black;
}

.container div:nth-child(2) {
  border: 18px solid blue;
}

.container div:nth-child(3) {
  border: 16px solid green;
}

.container div:nth-child(4) {
  border: 14px solid purple;
}

.container div:nth-child(5) {
  border: 12px solid palevioletred;
}

.container div:nth-child(6) {
  border: 10px solid orange;
}

.container div:nth-child(7) {
  border: 8px solid red;
}

.container div:nth-child(8) {
  border: 6px solid yellow;
}

.container div:nth-child(9) {
  border: 4px solid silver;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div>1</div>
</div>

3
  • Acredito que seja isso o que você procura: StackOverflow 16/10/2018 às 18:00
  • Fazer respostas citando a referência não é problema, pq vc não aproveita para responder aqui e explicar a técnica pra comunidade do SOpt?
    – hugocsl
    16/10/2018 às 18:07
  • Eu tenho apenas uma boa memória @hugocsl. Reconheci o caso e me lembrei da resposta. Não acho que tenha muito a acrescentar com explicações nesse caso. 16/10/2018 às 18:16

3 Respostas 3

7

A propriedade box-shadow permite anexar uma ou mais sombras a um elemento. O estilo de sombra escolhido para essa demonstração é o inset, que remete a a ideia de inserção. Sendo assim a sombra é colocada para dentro da moldura. Quanto as demais configurações:


Exemplo:

inset - estilo         (Especifica o estilo da sombra)
0     - offset-x       (Especifica a distância horizontal)
0     - offset-y       (Especifica a distância vertical) 
0     - blur-radius    (Especifica a desfocagem)
4px   - spread-radius  (Especifica a expansão/encolhimento da sombra)
#fff  - cor            (Especifica a cor da sombra)

As configurações podem ser outras, por isso, segue link de apoio.


body {
  background-image: linear-gradient(180deg, #fff 100%, #fff 50%);
  background-repeat: no-repeat;
  height: 100vh;
}
.multiple-border {
  background-color: #fff;
  border: 2px solid #000000;
  box-shadow:
    inset 0 0 0 2px #E0FFFF,
    inset 0 0 0 4px #4B0082,
    inset 0 0 0 6px #A9A9A9,
    inset 0 0 0 8px #ADFF2F,
    inset 0 0 0 10px #aa000a,
    inset 0 0 0 12px #99F0F9,
    inset 0 0 0 14px #888AAA;
  /* And so on and so forth, if you want border-ception */
  margin: 0 auto;
  padding: 3em;
  width: 16em;
  height: 16em;
  position: relative;
}
<div class="multiple-border">
  <!-- Content -->
</div>

Resposta extraida de: StackOverflow
Usuário: Terry

2
  • 2
    Explica a técnica ai pra gente, só com o código assim eu não entendo o que foi feito...
    – hugocsl
    16/10/2018 às 18:19
  • 3
    Seria bom uma explicação, em especial do parâmetro spread, que é o mais importante neste caso.
    – Largato
    16/10/2018 às 18:30
6

Como você mesmo citou temos a possibilidade de fazer usando divs, mas preferencialmente acho que quanto menos HTML melhor, por questões de performance. Vejamos alguns casos e como fazer.

Múltiplas bordas com pseudo-elementos

Para fazer bordas duplas ou triplas você pode utilizar pseudo-elementos, fica um pouco mais chato de fazer, mas tem mais suporte de navegadores por usar propriedades já bem conhecidas. Veja um exemplo:

body {
  display: flex;
  justify-content: center;
  padding-top: 05rem;
}

.borders {
  width: 100px;
  height: 100px;
  background-color: black;
  position: relative;
  border: 5px solid blue;
}

.borders:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: red;
  z-index: -1;
}

.borders:after {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background: orange;
  z-index: -3;
}
<div class="borders"></div>

Nesse estilo você pode fazer uma borda tripla, conforme o exemplo. Na verdade estamos meio que fazendo uma gambiarra (mas que funciona :D). O que acontece é que estamos pegando um elemento, uma div e aplicando um before e um after que irão possuir uma posição absoluta em relação ao elemento próprio elemento e com um deslocamento para todos os lados maior que a borda aplicada. A partir desse deslocamento aplicamos um background, que seria a cor da sua borda.

Múltiplas bordas com box-shadow

Essa técnica já foi mostrada em duas outras respostas, mas vale o conhecimento. Para isso vamos usar a propriedade CSS box-shadow, que por definição é:

O box-shadow é uma propriedade do CSS, é utilizado para adicionar efeitos de sombra em volta de um elemento. Você pode especificar mais de um efeito, os separando com virgulas. Uma box-shadow é descrita pelo deslocamentos (offset) X e Y em relação ao elemento, desfoco e propagação do raio e cor.

Só a definição já ajuda bastante a entender a propriedade (mas nada melhor que um exemplo para clarear qualquer dúvidas que possam surgir).

body {
  display: flex;
  justify-content: center;
  padding-top: 05rem;
}

.borders {
  width: 200px;
  height: 200px;
  background: black;
  position: relative;
  box-shadow: 
    0 0 0 10px hsl(0, 20%, 50%),
    0 0 0 15px hsl(0, 30%, 60%),
    0 0 0 20px hsl(0, 40%, 70%),
    0 0 0 25px hsl(0, 50%, 80%),
    0 0 0 30px hsl(0, 60%, 90%);
}
<div class="borders"></div>

Beleza, o box-shadow deu para entender, ele foi aplicando uma sombra ao elemento várias vezes, o que nos permite fazer a borda que for necessária, de qualquer tamanho (a imaginação é o limite).

Dentro desse box-shadow estamos usando o spread-radius, que define o tamanho da sombra. Importante ressaltar que valores positivos aumentam a sombra, e negativos diminuem. Veja essa pen que ajuda a entender melhor.

Mas a pergunta que vale 1 milhão de doláres é: o que é esse hsl usado?

Na verdade o hsl para fazer as bordas é irrelavante, ele apenas vai definir a Hue-saturation-lightness, ou seja, a cor, saturação e o brilho. Usei no exemplo para ter uma padrão nas cores e não ficar um arco-íris.

Show, você já pode dizer que já conhece duas técnicas, mas tem mais? Sim, tem a técnica de escrever várias divs, como na pergunta, e outra técnica mais limitada usando o outline, uma propriedade que poucos conhecem.

Múltiplas bordas com outline

O outline por definição é usado para configurar uma ou mais das propriedades de contorno outline-style, outline-width e outline-color. Você pode ver mais sobre a propriedade aqui. Acabada a breve introdução vamos ver um exemplo:

body {
  display: flex;
  justify-content: center;
  padding-top: 05rem;
}

.borders {
  width: 100px;
  height: 100px;
  background-color: black;
  border: 5px solid red;
  outline: 5px solid orange;
  position: relative;
}

.borders:after {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background: blue;
  z-index: -3;
  outline: 5px solid purple;
}
<div class="borders"></div>

O legal dessa técnica é que podemos integrar com a primeira, usando pseudo-elementos, para aplicar mais bordas. Acredito ser uma alterativa bem interessante, porém limitada, do box-shadow.

1
  • Bem interessante as outras técnicas!
    – hugocsl
    16/10/2018 às 18:59
4

O box-shadow é uma propriedade do CSS, é utilizado para adicionar efeitos de sombra em volta de um elemento.

Sintaxe padrão dessa propriedade:

box-shadow:

  • deslocamento horizontal/vertical - esses dois valores são correspondentes aos eixos x e y respectivamente, e permitem o posicionamento do sombreamento
  • blur - permite aplicarmos um desfoque ao sombreamento, tipo o gaussian blur do Photoshop
  • propagação (spread) - define o quanto iremos expandir ou contrair (valores negativos) o nosso sombreamento
  • cor - obviamente definirá a cor da nossa sombra.

Você pode especificar mais de um efeito, separando-os com virgulas. box-shadow - CSS | MDN

#box
{
	width: 10em;
	font-size: 1.5em;
	text-align: center;
	padding: 2em 1em;
	margin: 50px auto;
	background-color: #fff;
	border-radius: 2px;
	box-shadow: 
	0 0 0 4px orange,
	0 0 0 8px green,
	0 0 0 12px blue,
	0 0 0 16px #666,
	0 0 0 20px #fd0,
	0 0 0 24px #000,
	0 0 0 28px pink,
	0 0 0 32px red,
	0 0 0 36px #fa0,
	0 0 0 40px yellow;
}
<div id="box">multiple borders using box-shadow</div>

Compatibilidade com Navegadores

Navegadores antigos não possuem muito suporte para CSS3, mas caso você esteja utilizando os navegadores atualizados, irá funcionar perfeitamente.

fonte do exemplo



A propriedade box-shadow permite que se crie múltiplas sombras, basta separá-las com vírgula, e é aí que reside o seu poder e versatilidade. Além disso percebemos já de início que apenas com a utilização básica já podemos criar belos efeitos apenas com código CSS, deixando para trás técnicas obsoletas e ganhando em performance.

veja este exemplo:

body {
  font-size: 5px;
  background-color: #64ccf7;
}

#mario8bits {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1em;
  height: 1em;
  background-color: #df2516;
  box-shadow: 1em 0 0 #df2516, 2em 0 0 #df2516, 3em 0 0 #df2516, 4em 0 0 #df2516, 5em 0 0 #df2516, 6em 0 0 #df2516, 9em 0 0 #ecbd8f, 10em 0 0 #ecbd8f, 11em 0 0 #ecbd8f, -1em 1em 0 #df2516, 0 1em 0 #df2516, 1em 1em 0 #df2516, 2em 1em 0 #df2516, 3em 1em 0 #df2516, 4em 1em 0 #df2516, 5em 1em 0 #df2516, 6em 1em 0 #df2516, 7em 1em 0 #df2516, 8em 1em 0 #df2516, 9em 1em 0 #df2516, 10em 1em 0 #ecbd8f, 11em 1em 0 #ecbd8f, -1em 2em 0 #814125, 0 2em 0 #814125, 1em 2em 0 #814125, 2em 2em 0 #ecbd8f, 3em 2em 0 #ecbd8f, 4em 2em 0 #ecbd8f, 5em 2em 0 #ecbd8f, 6em 2em 0 #050c12, 7em 2em 0 #ecbd8f, 9em 2em 0 #df2516, 10em 2em 0 #df2516, 11em 2em 0 #df2516, -2em 3em 0 #814125, -1em 3em 0 #ecbd8f, 0 3em 0 #814125, 1em 3em 0 #814125, 2em 3em 0 #ecbd8f, 3em 3em 0 #ecbd8f, 4em 3em 0 #ecbd8f, 5em 3em 0 #ecbd8f, 6em 3em 0 #050c12, 7em 3em 0 #ecbd8f, 8em 3em 0 #ecbd8f, 9em 3em 0 #ecbd8f, 10em 3em 0 #df2516, 11em 3em 0 #df2516, -2em 4em 0 #814125, -1em 4em 0 #ecbd8f, 0 4em 0 #814125, 1em 4em 0 #814125, 2em 4em 0 #814125, 3em 4em 0 #ecbd8f, 4em 4em 0 #ecbd8f, 5em 4em 0 #ecbd8f, 6em 4em 0 #ecbd8f, 7em 4em 0 #050c12, 8em 4em 0 #ecbd8f, 9em 4em 0 #ecbd8f, 10em 4em 0 #ecbd8f, 11em 4em 0 #df2516, -2em 5em 0 #814125, -1em 5em 0 #814125, 0 5em 0 #ecbd8f, 1em 5em 0 #ecbd8f, 2em 5em 0 #ecbd8f, 3em 5em 0 #ecbd8f, 4em 5em 0 #ecbd8f, 5em 5em 0 #050c12, 6em 5em 0 #050c12, 7em 5em 0 #050c12, 8em 5em 0 #050c12, 9em 5em 0 #050c12, 10em 5em 0 #df2516, 0 6em 0 #ecbd8f, 1em 6em 0 #ecbd8f, 2em 6em 0 #ecbd8f, 3em 6em 0 #ecbd8f, 4em 6em 0 #ecbd8f, 5em 6em 0 #ecbd8f, 6em 6em 0 #ecbd8f, 7em 6em 0 #ecbd8f, 8em 6em 0 #ecbd8f, 9em 6em 0 #df2516, 10em 6em 0 #df2516, -3em 7em 0 #df2516, -2em 7em 0 #df2516, -1em 7em 0 #df2516, 0 7em 0 #df2516, 1em 7em 0 #df2516, 2em 7em 0 #4a4dd0, 3em 7em 0 #df2516, 4em 7em 0 #df2516, 5em 7em 0 #df2516, 6em 7em 0 #df2516, 7em 7em 0 #4a4dd0, 8em 7em 0 #df2516, 9em 7em 0 #df2516, 12em 7em 0 #814125, -5em 8em 0 #ecbd8f, -4em 8em 0 #ecbd8f, -3em 8em 0 #df2516, -2em 8em 0 #df2516, -1em 8em 0 #df2516, 0 8em 0 #df2516, 1em 8em 0 #df2516, 2em 8em 0 #df2516, 3em 8em 0 #4a4dd0, 4em 8em 0 #df2516, 5em 8em 0 #df2516, 6em 8em 0 #df2516, 7em 8em 0 #df2516, 8em 8em 0 #4a4dd0, 11em 8em 0 #814125, 12em 8em 0 #814125, -5em 9em 0 #ecbd8f, -4em 9em 0 #ecbd8f, -3em 9em 0 #ecbd8f, -2em 9em 0 #df2516, -1em 9em 0 #df2516, 0 9em 0 #df2516, 1em 9em 0 #df2516, 2em 9em 0 #4a4dd0, 3em 9em 0 #4a4dd0, 4em 9em 0 #4a4dd0, 5em 9em 0 #4a4dd0, 6em 9em 0 #4a4dd0, 7em 9em 0 #4a4dd0, 8em 9em 0 #f9e721, 9em 9em 0 #4a4dd0, 10em 9em 0 #4a4dd0, 11em 9em 0 #814125, 12em 9em 0 #814125, -4em 10em 0 #ecbd8f, -1em 10em 0 #4a4dd0, 0 10em 0 #df2516, 1em 10em 0 #4a4dd0, 2em 10em 0 #4a4dd0, 3em 10em 0 #f9e721, 4em 10em 0 #4a4dd0, 5em 10em 0 #4a4dd0, 6em 10em 0 #4a4dd0, 7em 10em 0 #4a4dd0, 8em 10em 0 #4a4dd0, 9em 10em 0 #4a4dd0, 10em 10em 0 #4a4dd0, 11em 10em 0 #814125, 12em 10em 0 #814125, -3em 11em 0 #814125, -2em 11em 0 #814125, -1em 11em 0 #814125, 0 11em 0 #4a4dd0, 1em 11em 0 #4a4dd0, 2em 11em 0 #4a4dd0, 3em 11em 0 #4a4dd0, 4em 11em 0 #4a4dd0, 5em 11em 0 #4a4dd0, 6em 11em 0 #4a4dd0, 7em 11em 0 #4a4dd0, 8em 11em 0 #4a4dd0, 9em 11em 0 #4a4dd0, 10em 11em 0 #4a4dd0, 11em 11em 0 #814125, 12em 11em 0 #814125, -4em 12em 0 #814125, -3em 12em 0 #814125, -2em 12em 0 #814125, -1em 12em 0 #4a4dd0, 0 12em 0 #4a4dd0, 1em 12em 0 #4a4dd0, 2em 12em 0 #4a4dd0, 3em 12em 0 #4a4dd0, 4em 12em 0 #4a4dd0, -4em 13em 0 #814125, -3em 13em 0 #814125, -5em 15em 0 #5cb0d3, -4em 15em 0 #5cb0d3, -3em 15em 0 #5cb0d3, -2em 15em 0 #5cb0d3, -1em 15em 0 #5cb0d3, 0 15em 0 #5cb0d3, 1em 15em 0 #5cb0d3, 2em 15em 0 #5cb0d3, 3em 15em 0 #5cb0d3, 4em 15em 0 #5cb0d3, 5em 15em 0 #5cb0d3, 6em 15em 0 #5cb0d3, 7em 15em 0 #5cb0d3, 8em 15em 0 #5cb0d3, 9em 15em 0 #5cb0d3, 10em 15em 0 #5cb0d3, 11em 15em 0 #5cb0d3, 12em 15em 0 #5cb0d3, -3em 16em 0 #5cb0d3, -2em 16em 0 #5cb0d3, -1em 16em 0 #5cb0d3, 0 16em 0 #5cb0d3, 1em 16em 0 #5cb0d3, 2em 16em 0 #5cb0d3, 3em 16em 0 #5cb0d3, 4em 16em 0 #5cb0d3, 5em 16em 0 #5cb0d3, 6em 16em 0 #5cb0d3, 7em 16em 0 #5cb0d3, 8em 16em 0 #5cb0d3, 9em 16em 0 #5cb0d3, 10em 16em 0 #5cb0d3;
}
<div id="mario8bits"></div>

codepen

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 .