Ads 468x60px

Entendendo CSS - Parte 3 - Bordas 1/3

Hoje, depois de muito tempo sem postar essa artigos desta série... Mas hoje estou voltando e vou falar um pouco sobre bordas no CSS, ainda falaremos em outros 2 artigos sobre bordas como formatá-las e os tipos diferentes dela! Vamos lá, hoje irei mostrar as posições das bordas.

Como usar as bordas ?
Veja no exemplo abaixo como usar as bordas, no exemplo eu utilizei a border-bottom para ter como exemplo a pergunta "Como usar bordas", pois uso nela o border-bottom:
test {padding-left:5px; font-size:17px; background-color:#FFF;}

test {border-bottom:2px solid #FFF; padding-left:5px; font-size:17px; background-color:#FFF;}


Quais as posições possíveis que posso utilizar as bordas ?
Você pode usar as bordas, nos quatro lados do objeto que quiser, para facilitar conheça o nome das bordas e as posições que elas ficam, para utiliza-las basta seguir o exemplo acima em que utilizei o border-bottom:
  • border-bottom - Borda posicionada abaixo do objeto.
  • border-left - Borda posicionada à esquerda do objeto.
  • border-top - Borda posicionada ao topo do objeto.
  • border-right - Borda posicionada à direita do objeto.

Quem observou o exemplo que tem no post, pode ver que além de eu colocar o border-bottom eu apliquei uns estilos à ela, vou ensinar isto nos 2 próximos artigos da série Entendendo CSS. Bom, espero que tenham gostado, e aguardem as próximas partes sobre as bordas!

4 comentários:

Caio Vinicius disse...

Bem Explicado Denis!

Kelleany Santos disse...

é fácil e um ótimo post Denis

Denis Gomez disse...

Obrigado pelo comentário Caio e Kelleany...

Izaque disse...

Denis aqui é o Izaque, quero saber porque meu link não esta em seu blog ? você mudou o template deve ser por isso que esqueceu, tudo bem só o coloque por favor.

Postar um comentário