28.11.2024

Adicionando uma Borda a um Div Sem Aumentar Tamanhos em CSS

Resposta Rápida

Se você deseja manter a borda dentro de um <div>, use box-sizing: border-box;. Esta propriedade CSS considera seu padding e border na largura e altura especificadas do elemento, evitando que ele se expanda.

.div-borda-interna {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 20px solid red; /* Aproveite a vivacidade */
  padding: 10px;
}

Ao atribuir esta classe ao seu <div>, você alcançará um estilo com uma borda interna:

<div class="div-borda-interna"></div>

O tamanho do bloco é 100px, e as bordas já estão incluídas nesses parâmetros.

Compatibilidade com Navegadores

Para garantir suporte a versões mais antigas dos navegadores, adicione:

.div-borda-interna {
  -webkit-box-sizing: border-box; /* Especificamente para Safari */
  -moz-box-sizing: border-box; /* Para usuários do Firefox */
  box-sizing: border-box;
  /* Outros estilos */
}

As propriedades prefixadas garantem compatibilidade até mesmo com IE8 e superior.

Bordas Internas com Efeito de Brilho através de box-shadow

Para criar bordas internas com um suave efeito de brilho, use box-shadow:

.div-sombra-borda-interna {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  box-shadow: inset 0px 0px 0px 10px red; /* Minha paixão pelo vermelho continua */
  padding: 10px;
}

É recomendável verificar o suporte do navegador no site Can I use.

Contornos Impressive Sem Alterar Tamanhos

Outline é uma excelente maneira de criar uma borda sem alterar o tamanho ou a posição do elemento:

.div-contorno-borda-interna {
  outline: 2px solid red; /* Você consegue sentir esse tom de vermelho? */
  outline-offset: -2px; /* Mova para dentro sem deslocar o elemento */
}

O outline-offset com um valor negativo permite que você mova o contorno da borda para dentro da tag <div>.

Casos de Uso para Situações Específicas

Situação: Múltiplas Bordas Internas

Crie múltiplas bordas separadas por vírgulas para um efeito impressionante:

.div-multiple-borders {
  box-shadow: inset 0 0 0 5px red, inset 0 0 0 10px blue; /* Vermelho e azul – que combinação! */
}

Situação: Efeitos de Hover

Dê vida ao elemento quando o cursor pairar sobre ele:

.div-efeito-hover:hover {
  box-shadow: inset 0 0 0 5px green; /* Passe o mouse e voilá – verde! */
}

Situação: Ajustando Cor e Espalhamento

Personalize a largura de espalhamento da borda e brinque com cores usando RGBA:

.div-borda-colorida {
  box-shadow: inset 0 0 0px 10px rgba(255, 0, 0, 0.5); /* Mais uma vez vermelho, mas mais suave desta vez */
}

Visualização

🖼️: [ Seu Exemplo ]
🖼️: [ ........................ ]  <!-- Espaço vazio -->

👉 Aplicando box-shadow para criar uma borda interna.

.artwork { 
  box-shadow: inset 0 0 0 2px blue; 
}

👉 Usando outline para uma borda embutida.

.artwork {
  outline: 2px solid blue;
  outline-offset: -2px;
}

Exemplos Avançados

Efeito 3D

Surpreenda seu público com um efeito 3D usando uma sombra interna de box-shadow:

.div-efeito-profundidade {
  box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.4); /* Seu próprio 3D */
}

Bordas Duplas Decorativas

A elegância pode impressionar tanto quanto a complexidade. Crie bordas duplas com box-shadow:

.div-bordas-decorativas {
  box-shadow: inset 0px 0px 0px 3px #EFEFEF, inset 0px 0px 0px 6px #BDBDBD; /* Encantador, não é? */
}

Transições de Bordas Animadas

Não quer que suas bordas permaneçam estáticas? Adicione animação:

.div-borda-animada {
  transition: box-shadow 0.3s ease;
}
.div-borda-animada:hover {
  box-shadow: inset 0 0 0 3px orange; /* Uma explosão laranja ao passar o mouse! */
}

Recursos Úteis

1. Introdução ao Modelo de Caixa CSS - CSS: Cascading Style Sheets | MDN — Um guia completo para o modelo de caixa CSS.
2. Bordas CSS - W3Schools — Aprimore suas habilidades com bordas CSS.
3. Box Sizing | CSS-Tricks — Por que box-sizing: border-box; é considerado fundamental no mundo do modelo de caixa CSS.
4. Pseudo-elementos CSS - W3Schools — Um artigo útil sobre pseudo-elementos ::before e ::after.
5. Box-shadow, um dos melhores recursos do CSS3 - CSS3 . Info — Um ótimo guia para usar sombras na "Bíblia do CSS3."
6. Design Web Responsivo: O Que É e Como Utilizá-lo — Smashing Magazine — Mantenha seu status de elite em design web no mais alto nível.

Video

Navigation