Modelo de caixa: Borda do CSS
- Página anterior Margem Interna do CSS
- Próxima página Margem Externa 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;}
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. |
- Página anterior Margem Interna do CSS
- Próxima página Margem Externa do CSS