CSS border: Aplicando estilos de borda de um elemento!

No CSS, o CSS border faz parte do conjunto de propriedades dos elementos HTML e é utilizado para adicionar um contorno ao redor de seu conteúdo. A borda está localizada entre o padding e a margin, e faz parte da estrutura que compõe o “box model”, que significa modelo de caixa CSS formada pelo conteúdo do elemento e as propriedades padding, border e margin.

A borda pode ter diferentes estilos e tamanhos e pode ser utilizada, por exemplo, ao redor do elemento <input> para delimitar o espaço disponível para a entrada dos dados em um formulário. Para demonstrar como esse recurso funciona, preparamos esse post com os seguintes tópicos:

  • O que é a propriedade border?
  • Qual a sintaxe dessa propriedade?
  • Quais os valores da propriedade border?
  • Exemplo de uso da propriedade border
  • Qual a compatibilidade com os navegadores?

Continue com a gente e boa leitura!

O que é a propriedade border?

A propriedade border adiciona um contorno ao redor do conteúdo do elemento HTML. Ela pode ser aplicada em apenas um ou em todos os lados do elemento, ou ainda, ter valores diferentes para cada um deles. Além disso, ela contém um conjunto de propriedades adicionais que ajudam a adicionar características à borda, como o tamanho, as cores e o estilo.

Qual a sintaxe dessa propriedade?

A propriedade border pode ser declarada de diferentes formas. Veja a sintaxe abaixo:

border: border-width border-style border-color

Em que:

  • border-width: define o tamanho da borda;
  • border-style: determina o estilo da borda;
  • border-color: indica a cor utilizada na borda.

Vale ressaltar que a declaração da borda pode ser feita com a sintaxe resumida ou com a declaração individual de cada propriedade. Por exemplo:

border: 5px solid red;

ou

border-width: 5px;
border-style: solid;
border-color: red;

A borda também pode ser declarada com os valores inherit ou initial. Vamos falar mais sobre eles nos próximos tópicos.

border: inherit; 
border: initial;

Quais os valores da propriedade border?

Como dissemos, a propriedade border contém recursos adicionais que ajudam a adicionar características específicas a ela. Confira como funciona cada um deles, a seguir.

Definindo a largura da borda: border-width

A propriedade border-width define qual será o tamanho da borda. Ela pode ser definida por meio de diferentes unidades de medida. Veja as sintaxes possíveis abaixo:

Lenght

Indica um tamanho para a borda, que pode ser valores absolutos ou relativos, entre eles:

  • px: valor numérico em pixels;
  • em: corresponde a duas vezes o tamanho da fonte utilizada no elemento;
  • rem: indica duas vezes o tamanho da fonte do elemento root; 
  • vh e vw: correspondem a altura (height) e largura (width) da área da tela (viewport).

Exemplo:

border-width: 3px;
border-width: 1.2 em;
border-width: 2 rem;
border-width: 1.2 vh;
border-width: 1.2 vw;

Thin

Definir a propriedade border-width igual “thin” faz com que o valor da borda seja igual a 1px para todos os lados.

border-width: thin;

Medium

Quando definimos a propriedade border-width igual a “medium”, temos o tamanho da borda correspondente a três pixels para todos os lados.

border-width: medium;

Thick

Quando o valor da propriedade border-width é igual a “thick”, significa que o elemento terá o tamanho da borda igual a cinco pixels em todos os lados.

border-width: thick;

Aplicando estilos a borda: border-style

O formato da borda pode apresentar diferentes estilos. Veja quais os possíveis valores para essa propriedade.

Solid

O valor do estilo da borda igual a solid corresponde a uma linha contínua ao redor do elemento ou do lado indicado.

border-style: solid;

None

Por padrão, os elementos são definidos com o estilo da borda igual a none, que significa que nenhuma linha será desenhada ao redor do elemento.

border-style: none;

Hidden

O valor hidden significa que existe uma borda ao redor do elemento, entretanto, ela não será visível na página. Trata-se de um recurso útil para adicionar mais espaço a um elemento sem tornar a borda visível.

border-style: hidden;

Dashed

O estilo dashed representa uma linha pontilhada ao redor do elemento.

border-style: dashed;

Dotted

O estilo dotted é representado por uma linha de pontos circulares ao redor do elemento.

border-style: dotted;

Double

No estilo double são desenhadas duas linhas ao redor do elemento. É importante dizer que o navegador faz o cálculo para determinar a espessura de cada linha. Entretanto, a somatória das duas linhas e o espaço entre elas correspondem ao valor definido na propriedade border-width.

border-style: double;

Groove

O estilo groove adiciona um efeito de cor na borda, que faz com que o elemento apresente a aparência como a de um botão pressionado.

border-style: groove;

Ridge

O valor ridge apresenta um efeito inverso ao groove e faz com que o elemento tenha o aspecto de um botão elevado.

border-style: ridge;

Inset 

É um efeito aplicado em uma tonalidade mais escura que a cor definida e faz com que o elemento tenha a aparência levemente pressionada.

border-style: inset;

Outset

É um efeito inverso ao inset e faz com que o elemento tenha a aparência levemente elevada.

border-style: outset;

Definindo a cor da borda: border-color

A cor da borda pode ser definida por meio de diferentes tipos de sistema de cores. Confira como é possível indicar essa propriedade!

Cores RGB

As cores RGB são representadas pela função rgb(red, green, blue) que recebe os parâmetros referente às cores vermelha, verde e azul.

border-style: rgb(60, 165, 44);

Cores RGBA

As cores RGBA funcionam de forma semelhante às cores RGB, entretanto, contém um parâmetro adicional para indicar a opacidade. Veja a sintaxe: rgba(red, green, blue, alpha). O conteúdo adicional corresponde a um valor numérico definido entre 0.0 para indicar total transparência a 1.0 para indicar total opacidade.

border-style: rgba(60, 165, 44, 1); 

Cores HSL

A definição das cores é feita com a utilização da função hsl(hue, saturation, lightness), que contém os parâmetros:

  • hue: indica a matiz;
  • saturation: indica a saturação;
  • lightness: indica a luminosidade.
border-style: hsl(143, 98, 79);

Cores HSLA

A definição de cores HSLA funciona de forma semelhante à HSL, entretanto, há a adição da propriedade alpha para determinar a intensidade da transparência. A sintaxe utilizada é hsla(hue, saturation, lightness, alpha).

border-style: hsla(143, 98, 79, 1);

Cores hexadecimais

As cores hexadecimais são representadas pelas tonalidades RR (red) — vermelha, GG (green) — verde e BB (blue) — azul. Os valores devem ser definidos entre 00 e FF e especificados com a expressão #RRGGBB.

border-color: # 3CA52C;

Nome das cores

Outra forma de definir as cores é por meio dos nomes predefinidos utilizados pelos navegadores. Vale ressaltar que nem todas as cores estão disponíveis. Os navegadores mais modernos oferecem uma lista com 140 nomes de cores.

border-color: DarkGreen; /* corresponde a: #006400 */

Redefinindo a propriedade para o valor padrão: initial 

A borda também pode ser definida para o valor padrão do elemento. Para isso, basta indicar o valor da propriedade border como initial.

border: initial;

Herdando a propriedade de seu elemento pai: inherit

A propriedade border pode ter as características herdadas do elemento pai. Para isso, devemos definir a propriedade como inherit.

border: inherit;

Utilizando imagens como borda: border-image

O CSS3, que é a versão mais recente do CSS, trouxe novas possibilidades para o uso da propriedade border. Uma delas é a aplicação de imagens ao redor do elemento. Para isso, utilizamos a propriedade border-image que contém a seguinte sintaxe:

border-image: url-imagem slice width outset

Em que:

  • url-imagem: corresponde ao endereço da imagem utilizada;
  • slice: indica o quanto da imagem será aplicada na borda;
  • width: representa o quanto da borda será preenchido com a imagem;
  • outset: o quanto a área ocupada pela imagem poderá utilizar além do espaço da borda.

Vale ressaltar que a propriedade border-image funciona em conjunto com a propriedade border. É preciso defini-la e indicar a cor como transparente para que a imagem seja exibida. No próximo tópico mostraremos um exemplo prático de sua utilização.

Exemplo de uso da propriedade border

No código de exemplo abaixo demonstramos tudo o que foi dito até aqui. Perceba como funciona os tamanhos da borda com a aplicação das diferentes unidades de medidas. Logo depois, mostramos todos os estilos da borda e aplicamos uma cor de background no elemento para melhor visualizar os efeitos. Também mostramos a aplicação das cores nas bordas com os diferentes modos de configuração. Por fim, demonstramos como funciona a propriedade border-image.

Caso queira testar, basta salvar a imagem abaixo em um diretório no seu computador, copiar esse código fonte para a mesma pasta e salvá-lo com a extensão HTML. Por fim, é só abrir em qualquer navegador.

<imagem borda.png>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS - Border</title>
</head>
<body>
    <div class="container flex-item-1">
        <h2>Tamanhos da borda</h2>
    </div>
    <div class="container flex bordaStyleColor">
        <div style="border-width: 3px">pixels</div>
        <div style="border-width: 0.2rem">rem</div>
        <div style="border-width: 0.5em">em </div>
        <div style="border-width: 1.2vw">vw</div>
        <div style="border-width: 1.2vh;">vh</div>
        <div style="border-width:thin">Thin</div>
        <div style="border-width:medium">Medium</div>
        <div style="border-width:thick">Thick</div>
    </div>
    <div class="container flex-item-1">
        <h2>Estilos da borda</h2>
    </div>
    <div class="container flex bordaWidthColor">
        <div style="border-style: solid">Solid</div>
        <div style="border-style: none">None</div>
        <div style="border-style: hidden">Hidden </div>
        <div style="border-style: dashed">Dashed</div>
        <div style="border-style: dotted">Dotted</div>
        <div style="border-style: double">Double</div>
        <div style="border-style: groove">Groove</div>
        <div style="border-style: ridge">Ridge</div>
        <div style="border-style: inset">Inset</div>
        <div style="border-style: outset">Outset</div>        
    </div>   
    <div class="container flex-item-1">
        <h2>Cores da borda</h2>
    </div>
    <div class="container flex bordaStyleWidth">
        <div style="border-color: DarkGreen">Cor por nome: DarkGreen</div>
        <div style="border-color: #3CA52C">Cor hexadecimal: #3CA52C</div>
        <div style="border-color: rgb(60, 165, 44)">Cor RGB: rgb(60,165,44) </div>
        <div style="border-color: rgba(60, 165, 44, 1)">Cor RGBA: rgba(60,165,44,1)</div>
        <div style="border-color: hsl(112,58%,41%)">Cor HSL   : hsl(112,41%,52%)</div>
        <div style="border-color: hsla(112, 58%, 41%, 0.5)">Cor HSLA: hsla(112,58,41,0.5)</div>
     </div>  
    <div class="container flex-item-1">
        <h2>Exemplos de borda com imagem</h2>
    </div>
    <div class="container flex">
        <div class="bordaImagem">
            Borda 1 preenchida com imagem.
        </div>
        <div class="bordaImagem2">
            Borda 2 preenchida com imagem.
        </div>  
        <div class="bordaImagem3">
            Borda 3 preenchida com imagem.
        </div>  
        <div class="bordaImagem4">
            Borda 4 preenchida com imagem.
        </div>   
        <div class="bordaImagem5">
            Borda 5 preenchida com imagem.
        </div>   
        <div class="bordaImagem6">
            Borda 6 preenchida com imagem.
        </div>   
    </div>
     <style>
        html{
            font-size: 12px;
        }
        .container{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            height: auto;
            font-size: 10px;
            text-align: center;
        }
        .flex-item-1{
            flex: 1;
            height: 20px;
            margin:10px;
        }
        .container div{
            width: 100px;
            height: 80px;
            flex-wrap: wrap;
            margin:10px;
         }
        .bordaStyleColor div{
            border-style:solid;
            border-color: red;
        }
        .bordaWidthColor div{
            border-width: 10px;
            border-color: grey;
            background-color: rgb(214, 212, 212);
        }
        .bordaStyleWidth div{
            border-style:solid;
            border-width: 10px;
        }
        .bordaImagem{
            border: 20px solid transparent;
            border-image:url(borda.png) 25% round;
        }
        .bordaImagem2{
            border: 30px solid transparent;
            border-image:url(borda.png) 50% round;           
        }
        .bordaImagem3{
            border: 30px solid transparent;
            border-image:url(borda.png) 40% stretch;           
        }
        .bordaImagem4{
            border: 50px solid transparent;
            border-image:url(borda.png) 100% round;           
        }
        .bordaImagem5{
            border: 50px solid transparent;
            border-image:url(borda.png) 25% stretch;           
        }
        .bordaImagem6{
            border: 25px solid transparent;
            border-image:url(borda.png) 40% repeat;           
        }
    </style>
</body>
</html>

Qual a compatibilidade com os navegadores?

Ao desenvolver uma aplicação web, é importante observar se os recursos utilizados são suportados nos principais navegadores. Deixar de realizar essa tarefa pode fazer com que a página apresente falhas durante a utilização pela pessoa usuária. Por isso, confira a partir de qual versão a propriedade border é suportada pelos navegadores:

  • Internet Explorer: 6;
  • Edge: 12;
  • Firefox: 2;
  • Chrome: 4;
  • Safari: 3.1;
  • Opera: 10;
  • iOS Safari: 3.2;
  • Android Browser: 81;
  • Opera Mobile: 59;
  • Chrome for Android: 88;
  • Firefox for Android: 83;
  • Samsung Internet: 4.

A propriedade CSS border é utilizada para adicionar um contorno ao elemento e está localizada entre o padding e a margin. Trata-se de um recurso que ajuda a melhorar a aparência do elemento com a aplicação de cores, estilo de linha e largura da borda. Além disso, oferece recursos adicionais, como a possibilidade de utilização de imagens, que permite tornar a aplicação ainda mais elegante.

Gostou do nosso conteúdo sobre a estilização da borda? Então, confira nosso post sobre o que é desenvolvimento web e como ingressar nessa carreira!

Deixe um comentário