Border CSS: Estilos de Borda Para Usar No Seu Site

Propriedades CSS

A border CSS, ou bordas aplicadas no estilo em cascatas, serve para que você estilize seu site da melhor forma. Ela permite separar um espaço do layout de uma página, definindo onde vai aparecer. Enquanto que a linguagem CSS permite que isso seja feio de forma mais flexível. 

Para entender melhor, neste artigo você encontrará:

  • o conceito de CSS;
  • o que é a propriedade border CSS;
  • entenda as propriedades da border CSS;
  • montando ou alterando a border CSS na prática.

Relembre o conceito de CSS

Antes de saber como usar o border CSS para alterar ou criar estilos de borda no seu site, é interessante relembrar, ou aprender, o que é CSS

CSS (Cascading Style Sheets ) é uma linguagem de programação baseada em regras. Com ela, é possível definir regras especificando grupos de estilos que serão aplicados em elementos visuais do seu site.   

Como o próprio nome sugere, CSS funciona como uma folha de estilo composta por camadas (ou, em tradução livre: Folhas de Estilo em Cascata).  Essa folha é usada para modificar a aparência de um site com marcação, definindo quais serão e como eles serão exibidos. 

A linguagem nasceu com a necessidade de aprimoramento do HTML, que levou a criação de tags e atributos de estilo para essa linguagem. Mas, na prática, marcar todas as alterações de estilo no HTML, uma por vez, não era funcional. Foi daí que surgiu o CSS. 

E o que é a propriedade border CSS?

Border é uma propriedade que adiciona um contorno em volta de um elemento HTML. Ela pode ser aplicada em todos os lados de um elemento da página e ter características diferentes, como tamanhos, cores e estilos.

Glossário do border CSS

Para entender melhor a estrutura e sintaxe da borda CSS, veja o glossário a seguir:

  • url-imagem: endereço da imagem;
  • slice: o quanto a imagem será aplicada na borda;
  • width: o quanto a borda será preenchida com a imagem;
  • outset: o quanto a área com a imagem poderá aparecer além do espaço da borda.

O width pode ser:

  • thin: para uma borda fina;
  • medium: para uma borda média;
  • thick: para uma borda grossa;
  • length: é a unidade de medida CSS (px, pt, em, cm, …).

order-CSS-estilos-de-borda-

Entenda as propriedades da border CSS

A linguagem da border CSS é cheia de termos, para ter certeza do que você está alterando, separamos o significado das propriedades (ou seja, aquilo que vai  definir as características das bordas de um elemento HTML). Veja:

 

  • fronteira:  define a propriedade de um dos lados da borda em um comunicado;
  • border: abreviação referente as quatro bordas;
  • border-top:propriedades da borda superior;
  • border-right:propriedades da borda direita;
  • border-left: propriedades da borda esquerda;
  • border-style:  define o estilo de borda dos elementos (ou definir separadamente um estilo para cada lado da borda).  “border-top-style”define o estilo da borda superior, já “border-bottom-style” indica o estilo da inferior. Por fim, “border-left-style” define o estilo da borda esquerda.
  • border-width:  define a largura do elemento (também individualmente, ou seja, uma largura para cada lado da fronteira). A  “border-top-width” define a espessura da borda superior, a  “border-right-width” define a espessura da borda direita.  enquanto que a “border-bottom-width” refere-se espessura da borda inferior;
  • border-color: define cores visíveis. “border-top-color” define a cor da borda superior, “border-bottom-color” é sobre a cor da borda inferior e “border-left-color” define a cor da borda esquerda.
  • border-bottom: define propriedades da borda inferior.

Glossário das propriedades da border CSS

As cores da border CSS podem ser representadas pelos códigos abaixo:

  • hexadecimal: #ffc6d9;
  • rgb: rgb(255,235,0);
  • rgba: rgb(255,235,0, 0.7);
  • código hsl: hsl(210,100%,40%);
  • código hsla: hsla(155,80%,35%,0.4);
  • palavra-chave: red, blue, green, black, etc;
  • transparente: transparent.

Já os estilos da border CSS podem aparecem em formato dos códigos:

  • none: sem borda;
  • hidden: equivalente a none;
  • dotted: borda pontilhada;
  • dashed: borda tracejada;
  • solid: borda contínua;
  • double: borda dupla;
  • groove: borda entalhada;
  • ridge: borda em ressalto;
  • inset: borda em baixo relevo;
  • outset: borda em alto relevo.

Montando ou alterando a border CSS na prática

Veja só as propriedades unidas e como o texto para definição e/ou alteração da borda de um site fica:

  • border: border-width border-style border-color (ou seja: tamanho da borda estilo da borda cor utilizada na borda)

No entanto, na hora de montar o texto, é  preciso que a sintaxe de cada uma das propriedades seja feita de forma resumida. Por exemplo:

  • border: border-width border-style border-color” ficaria “border: 5px solid black”;

Para aplicar a largura da borda, é usado o atributo border-width. Veja como ficaria:

p.one

{

border-style:solid;

border-width:5px;

}

p.two

{

border-style:solid;

border-width:medium;

}

Agora que você já entendeu os conceitos iniciais para mudar o estilo da border css em um site, saiba que com o criador de sites da GoDaddy é possível criar um site de forma intuitiva, clicando e arrastando elementos.

Além disso, conheça o serviço de suporte da GoDaddy, você também consegue fazer alterações personalizadas ao  obter um site em WordPress.

Imagem de: freepik.com

Jornalista apaixonada por literatura, música e cinema. É Analista de Conteúdo na Agência Mestre e, antes disso, foi produtora editorial, assessora de imprensa e teve vários blogs ao longo do caminho. A escrita é sua paixão e acredita que a comunicação pode mover barreiras.