🖼️ CSS: aprendendo a usar bordas

Foto de Mike B no Pexels

Aprender a usar bordas em CSS é um passo imprescindível para deixar a aparência do blog do seu jeito e sem depender de templates prontos. Se forem bem utilizadas elas conseguem deixar o leiaute bonito, leve e sem necessitar de muitas imagens.

Este tutorial foi classificado como intermediário, não tanto pela complexidade do código, mas porque é necessário ter boas noções de design para não deixar seu blog poluído e feio utilizando bordas cafonas ou em exagero.

• Definindo bordas diretamente na tag do elemento HTML
• Definindo bordas na folha de estilos CSS
• Tipos de bordas
• Lista de propriedades

🖼️ Definindo bordas diretamente na tag do elemento HTML

<div style='border:2px solid red; padding:5px;'>Este é um exemplo em que eu defini as bordas diretamente na tag. border define a borda e padding define a distância entre o texto e a borda, para facilitar a leitura e ficar bonito.</div>

Este é um exemplo em que eu defini as bordas diretamente no HTML. border define a borda e padding define a distância entre o texto e a borda, para facilitar a leitura e ficar bonito.

<div style='border-width:2px; border-style:solid; border-top-color:#ccccff; border-right-color:#ccffff; border-bottom-color:#ccffcc; border-left-color:#ffffcc; padding:5px;'>Este é um exemplo em que eu defini as bordas diretamente na tag. border define a borda e padding define a distância entre o texto e a borda, para facilitar a leitura e ficar simpático.</div>

Este é um exemplo em que eu defini as bordas diretamente na tag. border define a borda e padding define a distância entre o texto e a borda, para facilitar a leitura e ficar simpático.

🖼️ Definindo bordas na folha de estilos CSS

Como já foi dito no tutorial anterior, sua folha de estilos é tudo que está entre as tags <b:skin> e </b:skin> do Blogger ou entre as tags <style> e </style> de outros sites e blogs.

Escolha o elemento ao qual deseja acrescentar alguma borda. Neste exemplo eu quero acrescentar uma borda à classe .moldura. Eu procurei por ela na minha folha de estilos e verifiquei que ele está assim:

.moldura {font-size:180%;}

Vou acrescentar bordas:

.moldura {font-size:180%;
border:1px solid #f0f0f0;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;
padding-bottom:5px;
padding-right:5px;}

Lembrando mais uma vez que padding é a distância entre o texto e a borda. Exemplo de como vão ficar os elementos com a classe .moldura depois que eu fizer essa modificação:

Eles vão aparecer com bordas

🖼️ Tipos de bordas

Nos exemplos acima utilizei o tipo solid, mas não só de solid vivem as bordas. Vejamos:

<div style="border:2px dotted deeppink; padding:5px;">Exemplo de borda dotted (pontilhada).</div>	Exemplo de borda dotted (pontilhada).
<div style="border:2px dashed dodgerblue; padding:5px;">Exemplo de borda dashed (tracejada).</div>	Exemplo de borda dashed (tracejada).
<div style="border:5px double chocolate; padding:5px;">Exemplo de borda double (duplicada).</div>	Exemplo de borda double (duplicada).
<div style="border:10px ridge #993366; padding:5px;">Exemplo de borda ridge (moldura).</div>	Exemplo de borda ridge (moldura).
<div style="border:10px groove #993366; padding:5px;">Exemplo de borda groove (moldura invertida).</div>	Exemplo de borda groove (moldura invertida).
<div style="border:2px inset yellowgreen; padding:5px;">Exemplo de borda inset (baixo-relevo).</div>	Exemplo de borda inset (baixo-relevo).
<div style="border:2px outset yellowgreen; padding:5px;">Exemplo de borda outset (alto-relevo).</div>	Exemplo de borda outset (alto-relevo).
<div style="border:2px solid hotpink; padding:5px;">Exemplo de borda solid (sólida).</div>	Exemplo de borda solid (sólida).
<div style="border:hidden; padding:5px;">Exemplo de borda hidden (escondida).</div>	Exemplo de borda hidden (escondida).
<div style="border:10px #ffcc99; border-style:solid dotted dashed groove; padding:5px;">Exemplo de bloco usando quatro bordas diferentes, sendo que a ordem é no sentido horário: a primeira é sempre border-top e a quarta sempre border-left.</div>	Exemplo de bloco usando quatro bordas diferentes, sendo que a ordem é no sentido horário: a primeira é sempre border-top e a quarta sempre border-left.
<div style="border:5px plum; border-style:dotted dashed; padding:5px;">Quando eu coloco só dois estilos em border-style, o primeiro é border-top/border-bottom, o segundo é border-left/border-right.</div>	Quando eu coloco só dois estilos em border-style, o primeiro é border-top/border-bottom, o segundo é border-left/border-right.
<div style="border:5px coral; border-style:double hidden dotted; padding:5px;">Quando eu coloco três estilos em border-style, o primeiro é border-top, o segundo é border-left/border-right e o terceiro é border-bottom.</div>	Quando eu coloco só dois estilos em border-style, o primeiro é border-top, o segundo é border-left/border-right e o terceiro é border-bottom.

🖼️ Lista de propriedades:

• border você usa para definir as três características da borda: largura, estilo e cor.
• border-top você usa para definir a borda superior.
• border-bottom você usa para definir a borda inferior.
• border-left você usa para definir a borda esquerda.
• border-right você usa para definir a borda direita.
• border-style você usa para definir o estilo da borda.
• border-top-style você usa para definir o estilo da borda da borda superior.
• border-bottom-style você usa para definir o estilo da borda da borda inferior.
• border-left-style você usa para definir o estilo da borda da borda esquerda.
• border-right-style você usa para definir o estilo da borda da borda direita.
• border-color você usa para definir a cor da borda.
• border-top-color você usa para definir a cor da borda superior.
• border-bottom-color você usa para definir a cor da borda inferior.
• border-left-color você usa para definir a cor da borda esquerda.
• border-right-color você usa para definir a cor da borda direita.
• border-width você usa para definir a largura da borda.
• border-top-width você usa para definir a largura da borda superior.
• border-bottom-width você usa para definir a largura da borda inferior.
• border-left-width você usa para definir a largura da borda esquerda.
• border-right-width você usa para definir a largura da borda direita.

Para escolher cores que combinam com seu blog, visite sempre nossa tabela e nosso cubo de cores.

Ufa! Até eu relembrei um monte de coisa que não usava mais com este post. Espero que tenham gostado.

Fonte: HTMLDog