border propriedade em CSS permite especificar o estilo, largura e cor da borda de um elemento. É como a cereja do bolo, proporcionando um acabamento elegante e polido ao seu design. Com esta propriedade, você pode personalizar bordas para atender às suas preferências estéticas e criar separação visual entre as diferentes seções da sua página web.
Sintaxe
A sintaxe para o border propriedade é bastante simples. Você pode defini-lo usando a notação abreviada ou definir individualmente o estilo, largura e cor da borda. Vejamos um exemplo:
1 |
.element { |
2 |
border: 2px solid #000; |
3 |
}
|
Neste exemplo, definimos uma borda com largura de 2 pixels, um estilo de linha sólida e uma cor preta (#000). Por padrão, o border propriedade define o estilo da borda como nonea largura para mediume a cor para a cor do texto atual. Aplica-se à maioria dos elementos, incluindo os de nível de bloco e de nível inline. No entanto, lembre-se de que alguns elementos, como imagens e controles de formulário, possuem estilos de borda predefinidos.
O border propriedade não é herdada, o que significa que não será transmitida aos filhos do elemento. Quanto às animações CSS, sim, você pode animar o border propriedade usando quadros-chave e transições, adicionando um movimento encantador às suas bordas!
Exemplo
Experimente as propriedades das bordas separadas nesta demonstração:
Estilos de borda
Agora, vamos explorar os vários estilos de borda que você pode obter com o border propriedade. Cada estilo tem seu charme único e pode ser usado para criar diferentes efeitos visuais. Abordaremos os estilos mais comumente usados e alguns experimentais (embora possam não ser amplamente suportados ainda).
Sólido
O solid style cria uma linha simples e contínua que abrange a largura da borda. É como desenhar uma linha com um marcador. Confira o trecho de código abaixo para vê-lo em ação:
1 |
.element { |
2 |
border: 1px solid #f00; |
3 |
}
|
Pontilhado
Se você quiser uma borda que se assemelhe a uma fileira de pontos espaçados uniformemente, o dotted estilo é perfeito para você. É como ligar os pontos com o lápis. Aqui está um exemplo:
1 |
.element { |
2 |
border: 2px dotted #00f; |
3 |
}
|
Tracejadas
Com o dashed estilo, você pode obter uma borda composta de traços curtos. É como criar um rastro de pegadas na fronteira. De uma chance:
1 |
.element { |
2 |
border: 3px dashed #0f0; |
3 |
}
|
Dobro
O double estilo cria uma borda com duas linhas paralelas. É como ter uma cerca com duas camadas de arame. Dê uma olhada neste exemplo:
1 |
.element { |
2 |
border: 4px double #f90; |
3 |
}
|
Sulco
O groove estilo dá à borda uma aparência tridimensional, fazendo com que pareça uma ranhura esculpida. É como adicionar profundidade ao seu design. Veja como você pode usá-lo:
1 |
.element { |
2 |
border: 5px groove #909; |
3 |
}
|
Valores Adicionais
Existem alguns estilos de borda adicionais que você pode tentar:
-
ridge: cria uma borda que parece elevada. -
inset: cria uma borda que parece incorporada. -
outset: cria uma borda que parece elevada e em relevo.
Saber mais
Você sabia que pode aplicar diferentes estilos de borda a cada lado de um elemento usando o border-top, border-right, border-bottome border-left propriedades? Isso permite criar combinações exclusivas de bordas e adicionar profundidade aos seus designs. Sinta-se à vontade para explorar esta técnica e dar asas à sua criatividade!
“As bordas são como a moldura de uma pintura, realçando e exibindo o conteúdo interno. Não subestime o poder de bordas bem elaboradas para elevar seus designs.” – Lea Verou
Tutoriais relevantes
Para melhorar ainda mais a sua compreensão do border propriedade e suas aplicações, confira estes tutoriais úteis:
- Atualização CSS: Fronteiras
Especificação oficial e compatibilidade de navegador
Esperamos que esta documentação tenha fornecido a você o conhecimento e a inspiração para criar designs de bordas impressionantes. Feliz estilo!
