Bordas

Podcast do CSS - 016: Borders

No módulo do modelo de caixa, consideramos uma analogia de frame para descrever cada seção do modelo de box.

A caixa de borda é o frame das caixas, e as propriedades border oferecem uma enorme variedade de opções para criar esse frame em quase qualquer estilo que você imaginar.

Propriedades da borda

As propriedades border individuais fornecem uma maneira de definir o estilo das várias partes de uma borda.

Compatibilidade com navegadores

• 1
• 12
• 1
• 1

Origem

Estilo

Para que uma borda apareça, você precisa definir o border-style. Há algumas opções para escolher:

Ao usar os estilos ridge, inset, outset e groove, o navegador escurecerá a cor da borda da segunda cor exibida para fornecer contraste e profundidade. Esse comportamento pode variar de um navegador para outro, especialmente para cores escuras, como black. No Chrome, esses estilos de borda parecerão sólidos. No Firefox, eles serão clareados para fornecer uma segunda cor mais escura.

O comportamento do navegador também pode variar para outros estilos de borda, por isso é importante testar seu site em navegadores diferentes. Um exemplo comum dessa diferença é como cada navegador renderiza os estilos dotted e dashed.

Bordas mostradas no Chrome, Firefox e Safari.

Para definir o estilo de borda em cada lado da caixa, use border-top-style, border-right-style, border-left-style e border-bottom-style.

Forma abreviada

Assim como acontece com margin e padding, é possível usar a propriedade abreviada border para definir todas as partes da borda em uma declaração.

.my-element {
    border: 1px solid red;
}

A ordem dos valores na abreviação border é border-width, border-style e, em seguida, border-color.

Cor

Você pode definir a cor em todos os lados da caixa ou em cada lado individual com border-color. Por padrão, ele usa a cor de texto atual da caixa: currentColor. Isso significa que, se você declarar apenas propriedades da borda, como largura, a cor será esse valor calculado, a menos que você o defina explicitamente.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

Para definir uma cor de borda em cada lado da caixa, use border-top-color, border-right-color, border-left-color e border-bottom-color.

Largura

A largura de uma borda é a espessura da linha e é controlada por border-width. A largura padrão da borda é medium. No entanto, isso não será visível a menos que você defina um estilo. Você pode usar outras larguras nomeadas, como thin e thick.

As propriedades border-width também aceitam uma unidade de comprimento, como px, em, rem ou %. Para definir a largura da borda de cada lado da caixa, use border-top-width, border-right-width, border-left-width e border-bottom-width.

Propriedades lógicas

No módulo Propriedades lógicas, você descobriu como se referir ao fluxo de blocos e ao fluxo inline, em vez dos lados superior, direito, inferior ou esquerdo explícitos.

Esse recurso também pode ser usado com bordas:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

Neste exemplo, .my-element tem todos os lados definidos como tendo uma borda 2px, pontilhada, que é a cor do texto atual. A borda inline-end é definida como 2px, sólida e vermelha. Isso significa que, em idiomas escritos da esquerda para a direita, como o inglês, a borda vermelha fica no lado direito da caixa. Em idiomas com leitura da direita para a esquerda, como o árabe, a borda vermelha fica no lado esquerdo da caixa.

O suporte do navegador varia de acordo com as propriedades lógicas nas bordas. Portanto, verifique o suporte antes de usar.

Raio da borda

Para fornecer cantos arredondados a uma caixa, use a propriedade border-radius.

.my-element {
    border-radius: 1em;
}

Essa abreviação adiciona uma borda consistente a cada canto da caixa. Assim como acontece com as outras propriedades de borda, você pode definir o raio da borda de cada lado com border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius.

Você também pode especificar o raio de cada canto na abreviação, que segue a ordem: superior esquerdo, superior direito, inferior direito e inferior esquerdo.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

Ao definir um único valor para um canto, você está usando outra abreviação porque o raio da borda é dividido em duas partes: os lados vertical e horizontal. Isso significa que, ao definir border-top-left-radius: 1em, você define o raio superior esquerdo-superior e o raio superior esquerdo-esquerda.

Você pode definir ambas as propriedades, por canto, como este:

.my-element {
    border-top-left-radius: 1em 2em;
}

Isso adiciona um valor border-top-left-top de 1em e um valor border-top-left-left de 2em. Isso converte o raio da borda superior esquerda em um raio elíptico, em vez do raio circular padrão.

Esses valores podem ser definidos na abreviação border-radius, usando um / para definir os valores elípticos, após os valores padrão. Isso permite que você use a criatividade e faça algumas formas complexas.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

Imagens de borda

Você não precisa apenas usar uma borda baseada em traço no CSS. Também é possível usar qualquer tipo de imagem usando border-image. Essa propriedade abreviada permite definir a imagem de origem, como ela é dividida, a largura da imagem, o ponto inicial da borda e como ela precisa ser repetida.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

A propriedade border-image-width é semelhante a border-width: é assim que você define a largura da imagem de borda. A propriedade border-image-outset permite definir a distância entre a imagem da borda e a caixa que ela envolve.

border-image-source

O border-image-source (origem da imagem da borda) pode ser um url para qualquer imagem válida, incluindo gradientes CSS.

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

A propriedade border-image-slice é uma propriedade útil que permite dividir uma imagem em nove partes, compostas por quatro linhas divididas. Ele funciona como a abreviação margin, em que você define o valor de deslocamento superior, direito, inferior e esquerdo.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

Com os valores de deslocamento definidos, você tem nove seções da imagem: quatro cantos, quatro bordas e uma seção central. Os cantos são aplicados aos cantos do elemento com a imagem da borda. As bordas são aplicadas às bordas desse elemento. A propriedade border-image-repeat define como essas bordas preenchem o espaço, e a propriedade border-image-width controla o tamanho das frações.

Por fim, a palavra-chave fill determina se a seção do meio, à esquerda do corte, será usada ou não como a imagem de plano de fundo do elemento.

border-image-repeat

border-image-repeat é como você instrui o CSS sobre como quer que a imagem de borda se repita. Funciona da mesma forma que background-repeat.

• O valor inicial é stretch, que estende a imagem de origem para preencher o espaço disponível sempre que possível.
• O valor repeat agrupa as bordas da imagem de origem quantas vezes for possível e pode recortar as regiões de borda para fazer isso.
• O valor round é o mesmo que a repetição, mas, em vez de cortar as regiões de borda da imagem para caber o máximo possível, ele estica a imagem e a repete para atingir uma repetição contínua.
• O valor space é novamente, o mesmo que a repetição, mas esse valor adiciona espaço entre cada região de borda para criar um padrão contínuo.

Teste seu conhecimento

Teste seus conhecimentos sobre fronteiras

Qual é a cor de borda padrão?

black

Tente de novo.

white

Tente de novo.

currentColor

Esse valor CSS especial representará o valor text-color calculado e é a cor padrão da borda.

historicColor

Isso é inventado. Tente de novo.

.my-element {
  border: solid hotpink;
}

Qual é a largura padrão de uma borda?

1px

Tente de novo.

medium

🎉

solid

Esse é um valor border-style, não border-width.

border-inline: 1px solid faria...

colocar bordas à esquerda e à direita (em layouts latinos).

🎉

colocar bordas nas partes superior e inferior (em layouts latinos).

Em um layout em latim, como o inglês, border-block seria a parte superior e inferior.

colocar bordas dentro.

Tente de novo.

colocar bordas na primeira linha.

Tente de novo.