19.1.13

Estilos de bordas CSS


Boa tarde gente!

O post de hoje é pequeno, mas daqui a pouco vou sair, então não deu para fazer algo grande, mas creio que será bem útil para bastante gente. Vou ensinar os tipos de bordas CSS. Como assim? Bom, todo mundo já deve ter mexido no HTML do seu blog pelo menos uma vez, não é mesmo? Pois bem, alguma vez já devem ter se deparado com a propriedade CSS Border. É a propriedade que nos permite colocar borda em algo. Normalmente vêm como "border", "border-style", "border-color", entre várias outras. 

Assim, hoje trouxe para vocês os estilos de borda que existem. Ao total são 8 tipos. Normalmente, os mais comuns de serem usados são o "Solid", o "Dashed" e o "Dotted". Mais existem outros modelos que podem te ajudar bastante na confecção do seu design. Normalmente, gosto de usá-las para por na blockquote, como borda da área dos posts, para enfeitas títulos, menus, efeitos, etc.


Para adicioná-las, apenas adicione o(s) seguinte(s) código(s) aonde você quer por a borda. Por exemplo, se quer por na blockquote, adicione uma linha no código dela contendo as informações da borda que quer:

Solid

border: 3px solid #C2DEE9;

Double

border: 3px double #C2DEE9;

Dotted

border: 3px dotted #C2DEE9;

Dashed

border: 3px dashed #C2DEE9;

Inset

border: 3px inset #C2DEE9;

Outset

border: 3px outset #C2DEE9;

Groove

border: 3px groove #C2DEE9;

Ridge

border: 3px ridge #C2DEE9;


O que está em negrito é o tamanho (espessura) e a cor. Mude-as ao seu gosto.

O código de cada respectiva borda está abaixo dela. Caso não tenham entendido, basta comentar que te responderei. Lembrando que o código que está abaixo da borda, é o que você adiciona aonde quiser. 
Espero que tenha sido útil. Beijos ♥


6 comentários:

  1. Rs', eu só conhecia os famosos dotted, dashed e solid, rsrs' Mas gostei de conhecer os outros, especialmente o outside *-* Beijão!

    Ju, do Epílogos e Finais.

    ResponderExcluir
  2. Já sabia esse tipo de bordas, mas é sempre bom refrescar a memória xD
    Beijos >.< Good Lollipop

    ResponderExcluir
  3. Seu blog é demais *-*
    Legal o tuto flor
    http://perfeitateen.blogspot.com.br/

    ResponderExcluir
  4. *0* Não sabia como fazer tipos de borda, gostei flor!
    Ótimo tuto!
    Sonhos de Mel
    -M

    ResponderExcluir
  5. Não sabia que existia todos esses estilos de borda xD Conhecia só até a tracejada kkk
    Gostei da Groove/Ridge~

    Bjs ;*
    www.tortademenina.com

    ResponderExcluir
  6. Adorei seu blog muito lindo :D
    Seguindo
    Beijos ;*
    sweetjujuba.blogspot.com

    ResponderExcluir