helldanger1
GForum VIP
- Entrou
- Ago 1, 2007
- Mensagens
- 29,631
- Gostos Recebidos
- 1
Explicação dos diferentes tipos ou estilos de bordas que podemos criar em CSS, através do atributo border.
Por Miguel Angel Alvarez - Tradução de JML
CSS permite criar vários tipos de bordas em elementos da página. A borda mais habitual é a de uma linha lisa, porém, também há outros tipos de bordas que podemos implementar como uma linha de pontos, bordas arredondadas, etc. Neste artigo de CriarWeb.com veremos as distintas possibilidades de criação de bordas em CSS.
Na verdade, já falamos várias vezes em CriarWeb.com de bordas com CSS, sobretudo para explicar modos de fazer as bordas arredondadas, que costumam ficar muito atraentes nas páginas web. De qualquer forma, veremos como se especifica uma borda com CSS.
DIV {
border: 1px solid #d0d0d0;
}
Assim, conseguiremos que todas as etiquetas DIV da página tenham uma borda de 1 pixel, sólido (de uma linha sólida) e com cor acinzentada (#d0d0d0).
O que vamos ver neste artigo são os diferentes estilos de borda, além do solid que já conhecemos. Para ilustrar o exercício, criamos uma página com os distintos exemplos de bordas. Porém, já que estamos falando de bordas, sobre sua declaração em CSS, cabe dizer que poderíamos utilizar outra notação distinta, na qual especificamos separadamente os três atributos da borda, como segue:
.bordasolido{
border-color: #aaaaaa;
border-width: 1px;
border-style: solid;
}
Também podemos especificar as bordas separadamente de cada um dos lados do elemento, desta maneira:
.bordaporlados{
border-top: 1px solid #ff9999;
border-right: 2px dotted #99ff99;
border-bottom: 2px dashed #9999ff;
border-left: 4px double #666666;
}
Por Miguel Angel Alvarez - Tradução de JML
CSS permite criar vários tipos de bordas em elementos da página. A borda mais habitual é a de uma linha lisa, porém, também há outros tipos de bordas que podemos implementar como uma linha de pontos, bordas arredondadas, etc. Neste artigo de CriarWeb.com veremos as distintas possibilidades de criação de bordas em CSS.
Na verdade, já falamos várias vezes em CriarWeb.com de bordas com CSS, sobretudo para explicar modos de fazer as bordas arredondadas, que costumam ficar muito atraentes nas páginas web. De qualquer forma, veremos como se especifica uma borda com CSS.
DIV {
border: 1px solid #d0d0d0;
}
Assim, conseguiremos que todas as etiquetas DIV da página tenham uma borda de 1 pixel, sólido (de uma linha sólida) e com cor acinzentada (#d0d0d0).
O que vamos ver neste artigo são os diferentes estilos de borda, além do solid que já conhecemos. Para ilustrar o exercício, criamos uma página com os distintos exemplos de bordas. Porém, já que estamos falando de bordas, sobre sua declaração em CSS, cabe dizer que poderíamos utilizar outra notação distinta, na qual especificamos separadamente os três atributos da borda, como segue:
.bordasolido{
border-color: #aaaaaa;
border-width: 1px;
border-style: solid;
}
Também podemos especificar as bordas separadamente de cada um dos lados do elemento, desta maneira:
.bordaporlados{
border-top: 1px solid #ff9999;
border-right: 2px dotted #99ff99;
border-bottom: 2px dashed #9999ff;
border-left: 4px double #666666;
}