Modelo de caixa: Borda do CSS

A borda do elemento (border) é uma linha ou linhas ao redor do conteúdo e da margem interna do elemento.

A propriedade border do CSS permite que você defina o estilo, largura e cor da borda do elemento.

Borda do CSS

No HTML, usamos tabelas para criar bordas ao redor do texto, mas usando a propriedade de borda do CSS, podemos criar bordas excelentes e aplicá-las a qualquer elemento.

Dentro da margem externa do elemento está a borda do elemento (border). A borda do elemento é uma linha ou linhas ao redor do conteúdo e da margem interna do elemento.

Cada borda tem três aspectos: largura, estilo e cor. Em seguida, vamos explicar esses três aspectos em detalhes.

Borda e fundo

O CSS especifica que a borda é desenhada 'acima do fundo do elemento'. Isso é importante porque algumas bordas são 'interrompidas' (por exemplo, borda pontilhada ou borda tracejada), e o fundo do elemento deve aparecer entre as partes visíveis da borda.

O CSS2 indica que o fundo se estende até a margem interna, não até a borda. O CSS2.1 corrigiu isso: o fundo do elemento é o fundo do conteúdo, da margem interna e da área da borda. A maioria dos navegadores segue a definição do CSS2.1, embora alguns navegadores mais antigos possam ter um comportamento diferente.

Estilo da borda

É um dos aspectos mais importantes da borda, não porque o estilo controla a exibição da borda (claro, o estilo realmente controla a exibição da borda), mas porque sem estilo, não haveria borda.

O estilo do CSS Propriedade border-styleForam definidos 10 estilos diferentes não herdáveis, incluindo none.

Por exemplo, você pode definir a borda de uma imagem como outset, para que ela pareça como um 'botão em relieve':

a:link img {border-style: outset;}

Definição de vários estilos

Você pode definir vários estilos para uma borda, por exemplo:

p.aside {border-style: solid dotted dashed double;}

A regra acima define quatro estilos de borda para os parágrafos com o nome da classe 'aside': borda superior sólida, borda direita pontilhada, borda inferior tracejada e borda esquerda dupla.

Nós vimos aqui que o valor adotou a ordem de top-right-bottom-left, e também vimos essa ordem ao discutir a definição de múltiplos valores para diferentes margens internas.

Definição de estilo unilateral

Se você desejar definir o estilo da borda de um dos lados da caixa de elemento, em vez de definir o estilo da borda de todos os 4 lados, você pode usar as propriedades de borda unilateral abaixo:

Portanto, esses dois métodos são equivalentes:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

Atenção:Se você quiser usar o segundo método, deve colocar a propriedade de lado em seguida à propriedade abreviada. Porque se a propriedade de lado for colocada antes do border-style, o valor da propriedade abreviada cobrirá o valor none da propriedade de lado.

Largura da borda

Você pode definir Propriedade border-widthEspecificar largura da borda.

Existem duas maneiras de especificar a largura da borda: você pode especificar um valor de comprimento, como 2px ou 0.1em; ou usar uma das três palavras-chave, que são thin, medium (valor padrão) e thick.

Nota:O CSS não define a largura específica de três palavras-chave, então um agente de usuário pode definir thin, medium e thick como 5px, 3px e 2px, enquanto outro agente pode definir 3px, 2px e 1px.

Portanto, podemos definir a largura da borda da seguinte forma:

p {border-style: solid; border-width: 5px;}

ou:

p {border-style: solid; border-width: thick;}

Definir largura de um lado

Você pode definir a largura de cada lado do elemento na ordem de top-right-bottom-left:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

O exemplo anterior também pode ser abreviado da seguinte forma (esta forma de escrita é chamada deCópia de valor）：

p {border-style: solid; border-width: 15px 5px;}

Você também pode definir a largura de cada lado da borda usando as seguintes propriedades:

Portanto, as seguintes regras são equivalentes às do exemplo anterior:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

Sem borda

No exemplo anterior, você já viu que, para exibir algum tipo de borda, é necessário definir o estilo da borda, como solid ou outset.

Então, o que acontece se você definir border-style como none?

p {border-style: none; border-width: 50px;}

Embora a largura da borda seja de 50px, o estilo da borda é definido como none. Neste caso, não apenas o estilo da borda desaparece, mas sua largura também se torna 0. A borda desaparece, por quê?

Isso é porque se o estilo da borda for none, ou seja, a borda não existe, então a largura da borda não pode existir, portanto, a largura da borda é automaticamente definida como 0, independentemente do que você definiu anteriormente.

Lembre-se disso é muito importante. De fato, esquecer de declarar o estilo da borda é um erro comum. Segundo as seguintes regras, todos os elementos h1 não terão nenhuma borda, nem que seja de 20 pixels de largura:

h1 {border-width: 20px;}

Devido ao valor padrão de border-style sendo none, se não for declarado um estilo, é equivalente a border-style: none.Portanto, se você desejar que a borda apareça, deve declarar um estilo de borda.

Cor da borda

Configurar a cor da borda é muito simples. O CSS usa um simples Propriedade border-colorele pode aceitar até 4 valores de cor por vez.

Você pode usar qualquer tipo de valor de cor, por exemplo, pode ser uma cor nomeada, um valor hexadecimal ou um valor RGB:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

Se o valor da cor for menor que 4, a repetição de valores terá efeito. Por exemplo, as declarações de regras a seguir definem que os bordas superior e inferior do parágrafo são azuis, e as bordas esquerda e direita são vermelhas:

p {
  border-style: solid;
  border-color: blue red;
  }

Nota:A cor padrão da borda é a cor de primeiro plano do elemento. Se não for declarada uma cor para a borda, ela será a mesma que a cor do texto do elemento. Por outro lado, se o elemento não tiver nenhum texto, suponha que seja uma tabela que contém apenas imagens, então a cor da borda dessa tabela é a cor do texto do elemento pai (porque color pode ser herdado). Esse elemento pai é provavelmente body, div ou outro table.

Definir cor unilateral

Existem também propriedades de cor de borda unilaterais. Seu princípio é o mesmo que o estilo e largura unilaterais:

Para definir uma borda preta sólida para o elemento h1 e uma borda direita vermelha sólida, você pode especificar assim:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

Borda transparente

Nós falamos recentemente, se a borda não tiver estilo, não haverá largura. No entanto, em algumas situações, você pode desejar criar uma borda invisível.

O CSS2 introduziu o valor de cor de borda transparente. Este valor é usado para criar bordas invisíveis com largura. Veja o exemplo a seguir:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

Definimos os seguintes estilos para os links acima:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

Experimente você mesmo

De certa forma, usar transparente, usar bordas é como usar uma margem interna extra; além disso, há um benefício adicional, que é fazer com que ela seja visível quando necessário. Essa borda transparente é equivalente a uma margem interna, porque o fundo do elemento se estende até a área da borda (se houver um fundo visível).

Ponto importante:Antes do IE7, o IE/WIN não oferecia suporte para transparente. Nas versões anteriores, o IE configurava a cor da borda com base no valor da cor do elemento.

Exemplo de borda CSS:

Todas as propriedades das bordas em uma declaração
Este exemplo demonstra como usar atributos abreviados para definir todas as propriedades das quatro bordas em uma única declaração.
Definir o estilo de todas as quatro bordas
Este exemplo demonstra como definir o estilo de todas as quatro bordas.
Definir bordas diferentes em cada lado
Este exemplo demonstra como definir bordas diferentes em todos os lados do elemento.
Todas as propriedades da largura da borda em uma declaração
Este exemplo demonstra como usar atributos abreviados para definir todas as propriedades da largura da borda em uma única declaração.
Definir a cor de todas as quatro bordas
Este exemplo demonstra como definir a cor de todas as quatro bordas. Pode ser definida uma a quatro cores.
Todas as propriedades da borda inferior em uma declaração
Este exemplo demonstra como usar atributos abreviados para definir todas as propriedades da borda inferior em uma única declaração.
Definir a cor da borda inferior
Este exemplo demonstra como definir a cor da borda inferior.
Definir o estilo da borda inferior
Este exemplo demonstra como definir o estilo da borda inferior.
Definir a largura da borda inferior
Este exemplo demonstra como definir a largura da borda inferior.
Todas as propriedades da borda esquerda em uma declaração
Todas as propriedades da borda esquerda em uma declaração
Definir a cor da borda esquerda
Este exemplo demonstra como definir a cor da borda esquerda.
Definir o estilo da borda esquerda
Este exemplo demonstra como definir o estilo da borda esquerda.
Definir a largura da borda esquerda
Este exemplo demonstra como definir a largura da borda esquerda.
Todas as propriedades da borda direita em uma declaração
Este exemplo demonstra um atributo abreviado que permite definir todas as propriedades da borda direita em uma única declaração.
Definir a cor da borda direita
Este exemplo demonstra como definir a cor da borda direita.
Definir o estilo da borda direita
Este exemplo demonstra como definir o estilo da borda direita.
Definir a largura da borda direita
Este exemplo demonstra como definir a largura da borda direita.
Todas as propriedades da borda superior em uma declaração
Este exemplo demonstra como usar atributos abreviados para definir todas as propriedades da borda superior em uma declaração.
Definir a cor da borda superior
Este exemplo demonstra como definir a cor da borda superior.
Definir o estilo da borda superior
Este exemplo demonstra como definir o estilo da borda superior.
Definir a largura da borda superior
Este exemplo demonstra como definir a largura da borda superior.

Atributos de borda do CSS

Atributo Descrição
border Atributo abreviado, usado para definir os atributos de todas as quatro bordas em uma declaração.
border-style Usado para definir o estilo de todas as bordas do elemento, ou para definir o estilo de cada uma das bordas individuais.
border-width Atributo abreviado, usado para definir a largura de todas as bordas do elemento, ou para definir a largura de cada uma das bordas individuais.
border-color Atributo abreviado, usado para definir a cor visível de todas as bordas do elemento, ou para definir cores individuais para cada uma das 4 bordas.
border-bottom Atributo abreviado, usado para definir todos os atributos da borda inferior em uma declaração.
border-bottom-color Definir a cor da borda inferior do elemento.
border-bottom-style Definir o estilo da borda inferior do elemento.
border-bottom-width Definir a largura da borda inferior do elemento.
border-left Atributo abreviado, usado para definir todos os atributos da borda esquerda em uma declaração.
border-left-color Definir a cor da borda esquerda do elemento.
border-left-style Definir o estilo da borda esquerda do elemento.
border-left-width Definir a largura da borda esquerda do elemento.
border-right Atributo abreviado, usado para definir todos os atributos da borda direita em uma declaração.
border-right-color Definir a cor da borda direita do elemento.
border-right-style Definir o estilo da borda direita do elemento.
border-right-width Definir a largura da borda direita do elemento.
border-top Atributo abreviado, usado para definir todos os atributos da borda superior em uma declaração.
border-top-color Definir a cor da borda superior do elemento.
border-top-style Definir o estilo da borda superior do elemento.
border-top-width Definir a largura da borda superior do elemento.