Bordas - CSS

Bordas com CSS.
A estilizao de bordas com CSS rica em alternativas que tornam

as pginas web muito mais atraentes.
Bordas so propriedades que podem ser definidas para todos
os elementos HTML.
O uso mais comum em elementos div e em tabelas.
Nesta lio aprenderemos os diversos tipos de bordas com
exemplos ilustrativos.
Propriedades definidas para bordas no tero nenhum efeito
se antes no for definido seu estilo, atravs da
propriedade border-style.
Propriedade border-style - Estilo da borda
Como comentado acima, a primeira definio para definir
formataes especiais em bordas o estilo das mesmas.
Vejamos quais so os possveis estilos para bordas nesta
pgina de exemplo:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
8">
<title>Propriedade border-style em CSS</title>
</head>
<body>
<h3>
Exemplos da propriedade border-style.
</h3>

Este pargrafo foi definido com uma propriedade
border-style: dotted, que cria
uma borda com pontos.


border-style: dashed, que cria
uma borda com traos.


border-style: solid, que cria
uma borda slida.


border-style: double, que cria
uma borda dupla.


border-style: groove, que cria
um efeito na borda.


border-style: ridge, que cria
um efeito na borda.


border-style: inset, que cria
um efeito 3D na borda.


border-style: outset, que cria
um efeito 3D na borda.

</body>
</html>
Visualizando o resultado:

A pgina acima auto-explicativa e mostra a aparncia dos
diversos estilos que podem ser aplicados em bordas.
Proprieade border-color - Cor da borda
Aps ter definido o estilo da borda possvel definir tambm
uma cor para a mesma.
Se voc quiser aplicar cores personalizadas em suas pginas
veja a lio Tabela de Cores em HTML.
Vejamos um exemplo na pgina abaixo:
<html>
<head>
8">
<title>Propriedade border-color em CSS</title>
</head>
<body>
<h3>
Exemplos da propriedade border-color.
</h3>

Definio de uma propriedade
border-style: dotted, que cria
uma borda com pontos e a cor blue.


border-style: dashed, que cria
uma borda com traos e a cor green.


border-style: solid, que cria
uma borda com slida e a cor red.


border-style: double, que cria
uma borda dupla e a cor orange.


border-style: groove, que cria
um efeito na borda e a cor violet.


border-style: ridge, que cria
um efeito na borda e a cor teal.


border-style: inset, que cria
um efeito 3D na borda e a cor maroon.


border-style: outset, que cria
um efeito 3D na borda e a cor salmon.

</body>
</html>

Propriedade border-width - Largura da borda
Para definir a largura de bordas utiliza-se a
propriedade border-width, sendo mais utilizados os valores:
Pixels: px;
Um nome para o valor. Os valores podem ser:
o thin: uma borda fina.
o medium: uma borda mdia.
o thick: uma borda espessa.
Vejamos uma pgina que mostra esses valores na prtica:
<html>
<head>
8">
<title>Propriedade border-width em CSS</title>
</head>
<body>
<h3>
Propriedade border-width.
</h3>
<div style="font-size: small; font-family: 'Lucida Console',
Monaco, monospace">

border-style: dotted 
border-color: blue 
border-width: 1px


border-style: dashed 
border-color: green 


border-style: solid 
border-color: red 
border-width: thin


border-style: double 
border-color: orange 
border-width: medium


border-style: groove 
border-color: violet 
border-width: thick


border-style: ridge 
border-color: teal 


border-style: inset 
border-color: maroon 


border-style: outset 
border-color: salmon 

</div>
</body>
</html>

Valores individuais para bordas
Toda borda tem 4 lados: o de cima (border-top), o da direita
(border-right), o de baixo (border-bottom) e o da
esquerda (border-left).
possvel definir estilos para cada um dos lados das bordas,
com os valores:
border-top-style: estilo da parte de cima da borda.
border-right-style: estilo da parte direita da borda.
border-bottom-style: estilo da parte de baixo da
borda.
border-left-style: estilo da parte esquerda da borda.
Veja o exemplo da pgina abaixo:
<html>
<head>
8">
<title>Estilos em lados de bordas em CSS</title>
<style type="text/css">
p.quatro_estilos {
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: solid;
border-left-style: double;
border-width: 4px;
}
</style>
</head>
<body>
<h3>Estilos nos lados da borda.</h3>

border-top-style: dotted; 
border-right-style: dashed; 
border-bottom-style: solid; 
border-left-style: double; 
border-width: 4px;

</body>
</html>
Visualizando a pgina.

Tambm possvel definir estilos para os lados de bordas em
uma s linha, como no exemplo abaixo:
<html>
<head>
8">
<title>Estilos em lados de bordas em CSS</title>
</head>
<body>
<h3>Estilos nos lados da borda.</h3>

border-top-style: dotted; 
border-right-style: dashed; 
border-bottom-style: solid; 
border-left-style: double; 
border-width: 4px;

</body>
</html>
Visualizando a pgina:

Para definir diversos estilos em uma nica propriedade existe
uma regra que define a sequncia dos lados afetados:

A mesma regra se aplica para outros estilos, como no caso da
cor da fonte, que tambm pode ser definida em uma s linha:
<html>
<head>
8">
<title>Cores em lados de bordas em CSS</title>
p {
font-size: 18px;
font-weight: bolder;
border-style: solid;
border-width: 5px;
border-color: red green blue orange;
}
</style>
</head>
<body>
<h3>Cores diferentes nos lados da borda.</h3>

border-style: red green blue orange

</body>
</html>

Tambm possvel definir valores em uma s linha somente
para alguns lados, seguindo as regras mostradas no exemplo
abaixo:
<html>
<head>
8">
<title>Regras para estilos inline em bordas</title>
p {
font-size: 16px;
border-style: solid;
border-width: 5px;
}
</style>
</head>
<body>
<h3>Regras para lados em bordas.</h3>

Neste pargrafo foi definido:
border-color: green blue orange red, portanto:

<ul>
<li>A borda de cima ser verde</li>
<li>A borda da direita ser azul</li>
<li>A borda de baixo ser laranja</li>
<li>A borda da esquerda ser vermelha</li>
</ul>

border-color: green blue orange,
portanto:

<ul>
<li>A borda de cima ser verde</li>
<li>As bordas da direita e da esquerda sero azuis</li>
<li>A borda de baixo ser laranja</li>
</ul>

border-color: green blue,
portanto:

<ul>
<li>As bordas de cima e de baixo sero verdes</li>
<li>As bordas da direita e da esquerda sero azuis</li>
</ul>

border-color: green,
portanto:

<ul>
<li>Todas as bordas sero verdes</li>
</ul>
</body>
</html>

Propriedade border - Estilo da borda
Vimos acima algumas variaes para definio de estilos em
bordas, inclusive definindo estilos para lados especficos das
mesmas.
Mas existe um atalho no qual possvel determinar vrios
estilos em uma s linha para bordas.
Veja o trecho de cdigo CSS abaixo:
p { border: 1px solid green }
Para um mesmo elemento pargrafo (p) foram definidos trs
estilos:
A largura da borda (1px)
O estilo da borda (solid) e
A cor da borda (green)
Vejamos um exemplo de cdigo:
<html>
<head>
8">
<title>Estilos em uma s linha para bordas em CSS</title>
p { border: 2px dotted blue }
h4 { border: solid green }
h5 { border: 8px groove orange }
</style>
</head>
<body>
<h3>Estilos em bordas em uma s linha.</h3>

border: 2px dotted blue

<h4>
border: solid green
</h4>
<h5>
border: 8px groove orange
</h5>
</body>
</html>

Note que para o elemento h4 foi definido um estilo solid e
uma cor green mas no foi definida uma largura (width).
Para definir valores para propriedades em uma s linha o
nico elemento obrigatrio o estilo. No caso, como foi
definido como solid a cor pde ser aplicada e a largura foi
definida com o valor padro (medium).
Resumo dos estilos em bordas
Abaixo vemos uma tabela mostrando as possveis
propriedades utilizadas em bordas.
Propriedade Exemplo Descrio
border 1px solid black define vrios estilos em uma s linha
border-top 2px dotted green define estilos para a parte superior da borda
border-right 3px groove blue define estilos para a parte direita da borda
border-bottom dashed orange define estilos para a parte inferior da borda
border-left 2px double yellow define estilos para a parte esquerda da borda
border-top-style solid define o estilo slido para a borda superior
border-top-color green define a cor verde para a borda superior
border-top-width 3px define uma largura para a borda superior
border-right-style outset define um estilo para a borda direita
border-right-color blue define a cor azul para a borda direita
border-right-width 1px define uma largura para a borda direita
border-bottom-style inset define um estilo para a borda inferior
border-bottom-color red define uma cor vermelha para a borda inferior
border-bottom-width thin define uma largura para a borda inferior
border-left-style dashed define um estilo para a borda esquerda
border-left-color green define uma cor verde para a borda esquerda
border-left-width thick define uma largura para a borda esquerda
Existe ainda a propriedade border-collapse, utilizada em
tabelas. Essa propriedade ser abordada na lio "Tabelas
com CSS".

Bordas - CSS

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Bordas - CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

Bordas com CSS.

A estilizao de bordas com CSS rica em alternativas que tornam

Anda mungkin juga menyukai