Explicando os básicos: bordas, cantos arredondados e outline.

Tadaima, minna-san! Hoje começo uma sequência de postagens que visam ensinar as blogueiras que têm dificuldades em lidar com HTML, por preguiça, falta de vontade, tempo, ou por não entenderem nada do assunto. A maratona vai chamar-se: explicando os básicos. Falarei em cada post com todo o detalhe de coisas como background, bordas, cantos arredondados, sombra, hovers, outline, rotação e outro tipo de efeitos, controlo de cores, opacidade, hover gradual... 

Enfim, hoje tenciono dizer tudo sobre bordas. Como tudo, não funciona a não ser que seja incluída em alguma área, por exemplo, postagem, data... falarei disso mais adiante. Aqui irei explicar com todos os pormenores como personalizar e aplicar, cuidados a ter e possíveis maneiras de usar. Não direi apenas os tipos de bordas, mas mais que isso.

Bordas

Base:            border: tamanho tipo cor;

• O tamanho representa-se por um número, seguido de um px colado, por exemplo: 3px 
• O tipo seguirá um dos modelos que direi abaixo, por exemplo: solid
• A cor, você pode procurar numa tabela. Verifique sempre se tem este sinal (#) antes: #eeeeee
• Na border, você poderá especificar a localização por exemplo: border-left
• Com excepção da primeira palavra (border), não importa a ordem das restantes
• Se não colocar este sinal (;) no fim, o código não funciona.

O Tamanho:

• Representa-se por um número, seguido de um px colado. Ex: 3px;
• Números pequenos representam linhas mais finas
• Números grandes representam linhas grossas, mas por amor de deus, não ultrapasse 10px!
• O valor 0 anula a borda, independentemente do que vier a seguir
• Nunca se esqueça de colocar o (px) a seguir, e sem dar espaço
• Exemplo de aumento de espessura» www

Tipos:

• Solid - traço continuo. Veja nesta imagem» www
• Dashed - traço descontinuo/tracejado. Veja nesta imagem» www
• Dotted - traço descontinuo pontilhado. Veja nesta imagem» www
• Double - borda dupla, com espacinho entre as duas. Veja nesta imagem» www
• Groove - com diferenciação de cor, claro e escuro.Veja nesta imagem» www
• Inset - com cor escura no lado esquerdo e topo. Veja nesta imagem» www
• Outset - com cor escura na direita e em baixo. Veja nesta imagem» www

Cor:

• Qualquer cor e tonalidade podem ser usadas» www
• Podem apresentar-se de 3 maneiras: por nome» DodgerBlue; por código Java» rgb(30 144 255); por código HTML (mais comum)» #1E90FF; Acabei de referir a mesma cor de 3 maneiras» www
• Alguns cores em HTML a decorar: Branco» #ffffff OU #fff; Preto» #cccccc OU #ccc; Cinza» #eeeeee OU #eee;
• Não é possível usar graduação de cor nas bordas.

Localização:

• É provável que você, por vezes, só queira a borda de um lado do quadrado, ou assim. Há várias maneiras de explicitar, e aqui vão alguns exemplos apresentáveis.
• Igual nos 4 lados» www. Você pode dividir, ou fazer tudo de uma vez.
• À direita (right, em inglês)» www
• À esquerda (left)» www
• Em baixo (bottom)» www
• Em cima (top)» www
• Caso você especifique, não precisa de fazer uma borda só. Pode colocar várias, e bordas todas diferentes» www
• Se quiser a borda a pares, mesmo que sejam iguais, terá de as especificar uma a uma» www
• Para especificar as várias zonas, nunca se esqueça do hífen (-)

Cantos arredondados

O que é e tamanho:

• Também são uma borda, mas não colorida. São bordas arredondadas.
• Base» border-radius: 5px;
• Quanto maior o valor do número, maior o tamanho, e mais arredondado fica.
• Inversamente, quanto menor, menos arredondado.
• O valor 0 não faz nenhum arredondamento.
• Eu indico pelo menos sempre 1 px de arredondamento - nem que seja para amaciar os cantos. Mas se você gosta dos vértices definidos, é consigo.
• Pode usar valores bastante grandes, até uns bons 30px à vontade. E quanto maior a imagem ou área a personalizar, mais alto deve ser o valor, para se notar bem o arredondamento.

Personalização:

• Como já disse, pode mudar o tamanho» www
• Não é preciso arredondar todos os cantos, nem que tenham todos o mesmo tamanho de arredondamento.
• Quando os cantos são todos iguais» www
• Quando os cantos são diferentes» www; 
• Quando usamos 4 valores de arredondamentos diferentes, e juntamos na mesma linha para poupar espaço, a correspondência é a seguinte» www. Anda no sentido dos ponteiros do relógio.
• Modelos: alternado» www; folha» www; gota» www; Isto são exemplos para áreas grandes, mas se mantiver as proporções, dará certo.

Outline

Distância dos limites:

• Base»    outline-offset: -5px;
• É uma espécie de borda, que fica dentro da caixa.
• Este código estipula a distância de que a linha fica dos limites da caixa ou imagem. 
• Pelos motivos acima, só funciona com valores negativos.
• Quanto maior o valor absoluto (o número sem contar com o sinal), mais distante» www

Personalização:

• Base»      outline: 1px dashed #cccccc;
• Tanto quanto sei, não é possível aplicar a não ser nos 4 lados de cada vez.
• As personalizações são iguais às de uma borda» www
• Tamanho» 1px
• Tipo» Dashed
• Cor» #cccccc
• Altere pelos valores que quiser. Veja as explicações que eu dei para as bordas.

Coloquei as imagens ilustrativas como link para não ocuparem demasiado espaço, avisem se os links falharem. Os gifs são só para deixar o post harmonioso >.< E então, está bem explicadinho? :)