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):
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:
<html>
<head>
<style type="text/css">
p.solid {border-style: solid}
</style>
</head>
<body> <p class="solid"> Uma borda sólida</p> </body> </html>
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.
