09.02.2025

Configurando uma Borda de Um Lado em CSS

Resumo Rápido

Para criar uma borda de um lado, use os pseudo-elementos ::before ou ::after em CSS. Abaixo está um exemplo de como adicionar uma borda no lado direito:

.elemento::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 2px;
  background: #000;
}
.elemento { position: relative; }

Coloque a borda no lado desejado ajustando os parâmetros top, bottom, além de width e height.

Sombra da Caixa: O Agente Discreto das Bordas

Se a propriedade border parecer muito pesada, você pode usar a propriedade box-shadow. Isso permite criar uma borda de um lado usando a opção inset e sobrepondo sombras:

.elemento {
  box-shadow: inset 0 10px 0 0 rgba(255, 0, 0, 0.5);
}

Sombras não afetam o tamanho do elemento de bloco, o que permite estilizar bordas sem desorganizar o layout da página.

Pseudo-elementos para Toda Ocasião!

Usando ::before, você pode criar uma borda superior inesperada:

.elemento::before {
  content: '';
  display: block;
  height: 2px;
  background-color: blue; 
  margin-top: -2px;
}
.elemento { position: relative; }

Lembre-se de deixar espaço para que os pseudo-elementos ::before ou ::after sejam exibidos corretamente em nível de bloco.

Preenchimento e Cores: Os Melhores Amigos das Bordas

Para uma borda mais esteticamente agradável, ajuste o padding e o background. Para facilitar a gestão de cores, use variáveis em pré-processadores CSS como Sass ou Less.

Visualização

Se você quiser destacar um lado da borda:

|                  |
|                  |
|    🖼️             |
|                  |
|__________________|

Borda regular: |****
Destaque na borda: ____

O resultado será uma borda de um lado que agrega elegância aos seus projetos em HTML.

Deixe Sua Borda Ser Única

Flertando em 3D

Modifique o desfoque e as cores do box-shadow para dar à sua borda um efeito 3D:

.elemento {
  box-shadow: inset 0 0 10px 1px #444;
}

O Poder do Foco

Adicione estilos extras com o estado :focus:

.input:focus {
  box-shadow: 0 0 0 3px #0078d7 inset;
}

Mergulhe na Transparência

Brinque com a transparência tornando as bordas transparent enquanto destaca o contorno:

.elemento {
  border: 2px solid transparent;
}
.elemento:focus {
  box-shadow: 0 0 0 2px #0078d7;
}

Testando, Testando… 1, 2, 3

Não se esqueça de verificar a compatibilidade entre diferentes navegadores para garantir que sua borda seja exibida corretamente para todos os usuários.

Recursos Úteis

1. Propriedades de Contorno em CSS - Um guia sobre como usar outline em CSS.
2. border - CSS: Folhas de Estilo em Cascata | MDN - Uma descrição detalhada da propriedade border no MDN.
3. Pseudo-elementos CSS - Uma referência para trabalhar com pseudo-elementos CSS.
4. Borda CSS - Um recurso dedicado a trabalhar com bordas de um lado.

Video

Navigation