CSS – aplicando estilos às bordas

CSS – aplicando estilos às bordas

6 10 99
CSS – aplicando estilos às bordas 10 6 99
z_file_cssHoje irei explicar como aplicar estilos às bordas, usando CSS.
O atalho chama-se “border” e suas propriedades são:
  1. border-top ( borda superior)
  2. border-right (borda direita)
  3. border-bottom (borda inferior)
  4. border-left ( borda esquerda)
Para aplicar o mesmo estilo para todos os lados, usamos apenas o atalho “border”.
A sintaxe para aplicar estilos às bordas é:
seletor { border: largura estilo cor;}
Exemplo:
#linkbar a { color:#e6e6e6; text-transform:none; border-right:1px solid #808080; }
O seletor, em CSS, é o que vem sempre precedido por # (jogo da velha). “border-right” se refere ao lado da borda que receberá o estilo. “1px” é a largura, “solid” é o desenho e “#808080” é a cor da borda.
No exemplo acima, apliquei um estilo`apenas à borda direita da linkbar.
#busca { border: 1px solid #FFF; padding: 6px; }
Nesse outro exemplo, apliquei o mesmo estilo para os 4 lados da borda da busca.
Como vocês já devem ter notado, podemos aplicar estilos ao desenho da borda:
  • none: sem estilos
  • dotted: borda desenhada com pontos
  • dashed: borda desenhada com pequenas linhas
  • solid: borda desenhada com uma linha contínua
  • outset: borda em 3D
  • double: borda dupla
Vamos para outros exemplos, mostrando os desenhos das bordas:
border: 1px solid #FF0000;
border-bottom: #ff0000 1px dotted; border-left: #ff0000 1px dashed; border-top: #ff0000 1px double; border-right: #ff0000 1px solid
Assim como nos demais posts, recomendo que vocês façam as modificações em um blog de testes e que visualizem até encontrarem um resultado satisfatório.
6 Comments
Comments
  1. Olhando o código em si, é complicado. Porém o resultado fica muito bonito. Vale a pena se dedicar um pouco à HTML e CSS, pois deixa o blog ainda mais bonito (porém dá dor de cabeça se estudar muito, rsrs).

    ResponderExcluir
  2. Sim, Matheus, tudo isso é super complicado, mas vale à pena ;)

    ResponderExcluir
  3. Ótimo post juliana é sempre bom ler sobre HTML e CSS.

    Sou web designer e aprendi com o Dicas Blogger e seus Parceiros a criar templates para blogger de tanto ler suas dicas e tutoriais.

    Parabéns e continue assim!

    Extremo Humor
    BR Santiago

    ResponderExcluir
  4. Muito bom o artigo! Já tirou uma das minhas dúvidas no CSS,se bem que eu podia ter ligado na hosting da inter.net, que é onde eu hospedo meu blog, mass eu realmente nem tenho tempo, vc me ajudou e muito! Valeeu!

    ResponderExcluir
  5. CSS é muito fácil, porém há novidades que nem todos sabem. Algo que chama mais atenção no CSS agora é que pode usar essas bordas arredondadas com sombra e tira as imagens, acho muito bacana isso. Excelente dica Juliana!

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top