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.
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
.
![Demonstração de borda no Chrome, Firefox e Safari, que mostra as diferenças sutis na exibição das bordas.](https://web.dev/static/learn/css/borders/image/the-border-demo-chrome-b2a96d1dfcbd9.jpg?authuser=5&hl=pt)
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
white
currentColor
text-color
calculado e é a cor padrão da borda.historicColor
.my-element { border: solid hotpink; }
Qual é a largura padrão de uma borda?
1px
medium
solid
border-style
, não border-width
.border-inline: 1px solid
faria...
border-block
seria a parte superior e inferior.