Dicas de Leitura
Shopping Weblivre
CSS e as bordas
Aprenda tudo sobre as bordas no CSS
SOLID = Sólida, [sem fragmento]: Exemplo
DOTTED = Pontilhada [fragmentada]: Exemplo
DASHED = Traçada [fragmentada]: Exemplo
INSET = Aparencia "afundada" [sem fragmento]: Exemplo
OUTSET = Aparencia "estufada" [sem fragmento]: Exemplo
GROOVE = Aparencia 3D [sem fragmento]: Exemplo
DOUBLE = Duplicada [2 bordas com espaço no meio] = Exemplo
NONE = Nenhuma: Exemplo
DOTTED = Pontilhada [fragmentada]: Exemplo
DASHED = Traçada [fragmentada]: Exemplo
INSET = Aparencia "afundada" [sem fragmento]: Exemplo
OUTSET = Aparencia "estufada" [sem fragmento]: Exemplo
GROOVE = Aparencia 3D [sem fragmento]: Exemplo
DOUBLE = Duplicada [2 bordas com espaço no meio] = Exemplo
NONE = Nenhuma: Exemplo
A sintaxe para uso de borda é bem simples e tem uma ordem fácil de gravar, pois é a mesma para outros atributos.De laranja, é o atributo "border" que iremos usar no CSS
ex: #botao { border: 1px solid #000 }
De vermelho será a medida
ex: #botao { border: 1px solid #000 }
De verde, a 'unidade de medida', da medida.
ex: #botao { border: 1px solid #000 }
De azul temos o estilo da borda, como já expliquei acima.
ex: #botao { border: 1px solid #000 }
De rosa, está a cor da fonte, no caso #000
ex: #botao { border: 1px solid #000 }
Um pequeno resumo das sintaxesborder-left = borda esquerda [ex: border-left: 1px solid #000]
border-left-width = largura da borda esquerda [ex: border-left-width:1px]
border-left-color = cor da borda esquerda [ex: border-left: #000000]
border-left-style = estilo da borda esquerda [ex: border-left-style: solid]
border-right = borda direita [ex: border-right: 2px dotted black]
border-right-width = largura da borda direita [ex: border-right-width:2px]
border-right-color = cor da borda direita [ex: border-right: black]
border-right-style = estilo da borda direita [ex: border-right-style: dotted]
border-top = borda superior [ex: border-top: 1px dashed rgb(240,0,20)]
border-top-width = largura da borda superior [ex: border-right-top:1px]
border-top-color = cor da borda superior [ex: border-top: rgb(240,0,20)]
border-top-style = estilo da borda superior [ex: border-top-style: dashed]
border-bottom = borda inferior [ex: border-bottom: 3pt groove #e1e1e1]
border-bottom-color = cor da borda inferior [ex: border-botom: #e1e1e1]
border-bottom-style = estilo da borda inferior [ex: border-bottom-style: groove]
border-bottom-width = largura da borda inferior [ex: border-bottom-width: 3pt]
Sintaxe: border: Nm estilo cor
Explicando:
ex: #botao { border: 1px solid #000 }
ex: #botao { border: 1px solid #000 }
ex: #botao { border: 1px solid #000 }
ex: #botao { border: 1px solid #000 }
ex: #botao { border: 1px solid #000 }
Vamos ver mais alguns exemplos:
Exemplo1
<span style="border:5px groove red; background:#f00; color:#fff"> Exemplo1 </span>
| Exeplo2 | |
|---|---|
| exemplo2 | exemplo2 |
<table cellspacing=1 style='font:10px verdana'> <tr><th colspan=2 style='border:3px double #090'> Exeplo2</th></tr> <tr><td style='border:3px double #090'>exemplo2</td> <td style='border:3px double #090'>exemplo2</td> </tr></table>Exemplo3
<span style="border-bottom:2px dotted #f00"> Exemplo3 </span>
<button style="border:1px outset #dd0; background:#bb0">Exemplo4</button>Bom, são muitas as combinações de bordas com outros atributos de CSS, como você viu nos exemplos acima, você também pode criar seus estilos para várias tags de HTML. É claro que, você não precisa usar apenas o estilo interno, pode criar um arquivo CSS com esses estilos de borda e depois utilizar o atributo "class" ou "id" assim como no exemplo abaixo, veja:
<html>
<head>
<style type="text/css"><!--
.mk {
border:1px solid #000;
background:#fb0
}
#brasil {
border-left:'3px double #dd0';
background:#0d0;
border-right:'3px double #dd0';
border-top: 2px dashed #0000ff;
border-bottom:2px dashed #0000ff
}
--></style>
</head>
<body>
<span class=mk2>Exemplo5</span>
<span id=brasil>Exemplo5</span>
</body>
</thml>
Bom é isso aí, as bordas são muito úteis e deixam o HTML muito mais bonito e com CSS então, elas ficam muito melhores. Por hoje é só, até mais! :]
Por: Marco Antonio Vieira de Oliveira
Autor: Marco Antonio
Compartilhe:
Comentários
itamar de aguiar neves em 09/06/2008
eu css e muito bom
blz galera
Q merda em 25/10/2007
Cara não tenho nem palavras isso mudo minha vida sem isso nao ia te sentido existir!!!
TU EH FODA!!!!
Alex em 04/09/2007
Cara achei legal,principalmente para quem não sabe muito! Eu estou entrando agora em CSS,é uma dica bacana para se treinar,um abraço....