Tutorial – Estilizando Bordas com CSS


O CSS trouxe muitos benefícios para o uso de elementos gráficos no webdesign, tornando a administração do layout muito mais simples através da folha de estilos. O uso do CSS para a estilização de bordas permite o emprego de uma grande variedade de estilos e outros elementos. Confira nesse tutorial algumas configurações básicas para a estilização de bordas que podem ajudar na criação de seus projetos!

Para começar, há três configurações principais que você pode mudar em bordas:
border-width
border-color
border-style

Por exemplo, o código abaixo irá aplicar uma borda de 1px para um elemento:
border: 1px solid black;

Podemos modificar essa sintaxe um pouco:
border-width: thick;
border-color: black;
border-style: solid;

Como visto neste exemplo, além da passibilidade de passar um valor específico (no caso de 1px) para border-width, é também possível trocar o valor por uma das três palavras-chave que expressam a largura da borda: thin (fina), medium (média), e thick (grossa):

utilização de CSS para estilização de bordas

Estilos de borda com CSS

Estes atributos determinam como as bordas serão apresentadas:

Color
As cores podem ser expressadas utilizando:
código hexadecimal, exemplo: #000000
código rgb, exemplo: rgb (0,0,0)
nome da cor em inglês, exemplo: black

Style
A seguir, alguns estilos de borda que podem ser expressados através das seguintes variáveis:
Para não utilizar bordas: “none” ou “hidden”
Para ter uma borda pontilhada – border-style: dotted;
Borda tracejada – border-style: dashed;
Borda com caneleta – border-style: groove;
Borda contínua – border-style: solid;
Borda dupla – border-style: double;
Borda em ressalto – border-style: ridge;
Borda em baixo relevo – border-style: inset;
Borda em alto relevo – border-style: outset;

Width
Como já demonstramos, além de um valor específico é possível utilizar o seguinte para expressar a largura das bordas:
Borda fina: “thin”
Borda média: “medium”
Borda grossa: “thick”
Para definir um comprimento: “length” seguido de um valor em uma medida reconhecida pelo padrão CSS, por exemplo px, pt ou cm.

Exemplo de uso no código:

 

Lembre-se: os estilos não aparecerão idênticos em todos os navegadores. Escreva seu CSS para os navegadores mais modernos, fornecendo alternativas no código para navegadores menos utilizados, como o Internet Explorer 5.0.

Leonéia Evangelista

Leonéia Evangelista

é bacharel em Comunicação Digital pela Unisinos e mestre em Bibliotecas Digitais pelo programa Digital Library Learning (Erasmus Mundus). Trabalha com web há mais de 8 anos e atualmente cursa MBA em Marketing Estratégico.
Leonéia Evangelista

Comentários

comentário(s)

Categories