Bordas e contornos CSS são ferramentas valiosas para web designers que procuram adicionar estilo a um site. Eles são fáceis de usar quando você sabe como funcionam e são versáteis o suficiente para atender a uma ampla gama de necessidades. Vamos ver as bordas do CSS para ver por onde você deve começar.

Qual é a diferença entre uma borda e um contorno em CSS?

Contornos e bordas CSS formam duas das camadas externas de o modelo de caixa CSS, sentado entre fronteiras e margens. Embora essas propriedades sejam semelhantes, elas têm valores e propósitos diferentes.

Por um lado, os contornos do CSS ficam fora das bordas. Isso significa que eles podem se sobrepor ao conteúdo fora do elemento ao qual você os aplica. Junto com isso, as bordas do CSS alteram as dimensões de um elemento, mas os contornos não.

Se tiver dificuldade em visualizar estilos de borda e contorno, você pode usar seu ferramentas de desenvolvimento do navegador para depurar eles.

Valores de propriedades compartilhadas de contorno e borda CSS

instagram viewer

Apesar de suas diferenças, bordas e contornos CSS compartilham alguns de seus valores. A abreviação que você usa para cada um também é muito semelhante.

CSS Border & Outline Shorthand

Como outras propriedades CSS complexas, tanto as bordas quanto os contornos têm atalhos disponíveis. Ambas as propriedades compartilham o mesmo formato para suas opções de abreviação e se parecem com isso.

fronteira: larguraestilocor;
contorno: larguraestilocor;

Isso cria regras que se parecem com isso quando estão em ação. Claro, porém, esta abreviação não cobre todos os valores disponíveis para essas propriedades.

borda: 10px azul sólido;
contorno: 20px vermelho sólido;

Essas regras abreviadas de borda e contorno CSS resultam em uma borda azul fina com um contorno vermelho grosso.

Como outras propriedades CSS abreviadas, você também pode usar propriedades individuais para obter os mesmos resultados.

Largura da borda do CSS e largura do contorno

Larguras de borda e contorno são valores de propriedade CSS opcionais que definem a espessura das bordas e contornos que você usa. O formato dessas propriedades é o mesmo.

largura do contorno: 20px;
largura da borda: 10px;

As bordas permitem que larguras individuais sejam definidas para cada lado do elemento, mas os contornos não. Você pode ler mais sobre isso nas seções a seguir.

Estilo de borda CSS e estilo de contorno

As bordas e contornos CSS vêm em uma variedade de estilos. Bordas sólidas são as mais comuns, mas você pode ser criativo com a maneira como usa bordas e contornos.

estilo de borda: sólido;
estilo de contorno: pontilhado;

Você pode encontrar uma lista completa dos diferentes estilos de contorno e borda CSS no final deste artigo.

Cor da borda CSS e cor do contorno

Assim como outras propriedades CSS baseadas em cores, bordas e contornos aceitam todas as cores CSS legais. Isso inclui códigos hexadecimais, códigos RGB, cores abreviadas e muito mais.

cor da borda: azul;
cor do contorno: #ff0000;

Você também pode usar gradientes de cores ao trabalhar com bordas e contornos CSS.

Valores de propriedade de borda CSS

Juntamente com seus valores de propriedade compartilhados, bordas e contornos também têm valores exclusivos para explorar. As bordas CSS têm duas propriedades únicas que valem a pena aprender.

CSS border-radius

Adicionar um raio à borda de um elemento oferece muito controle sobre sua forma. Cada canto de um elemento pode ter um raio diferente e essa propriedade pode ser definida mesmo quando o estilo de borda estiver definido como nenhum.

raio da borda: 20px;

Você pode definir um único valor para alterar o raio de todos os cantos.

Você também pode dividir os cantos em grupos de superior esquerdo/inferior direito e superior direito/inferior esquerdo.

raio da borda: 10px 20px;

Isso facilita a criação de formas interessantes com seus elementos HTML.

Finalmente, você pode definir cada canto para ter seu próprio raio.

raio da borda: 10px 20px 30px 40px;

Esses valores se aplicam no sentido horário a partir do canto superior esquerdo.

Propriedades do lado da borda do CSS

Ao contrário dos contornos, você pode definir cada lado de uma borda para ter um valor exclusivo para muitas de suas propriedades. Isso torna possível dar a cada lado do seu elemento uma largura diferente.

largura da borda esquerda: 10px;
largura da borda direita: 20px;
largura da borda superior: 30px;
largura inferior da borda: 40px;

Você também pode definir estilos de borda CSS independentes para cada lado de um elemento.

estilo de borda esquerda: sólido;
estilo de borda à direita: pontilhado;
estilo de borda superior: tracejado;
estilo border-bottom: dobro;

E você pode mudar a cor de cada lado, se quiser.

estilo de borda esquerda: azul;
estilo de borda direita: #ff0000;
estilo de borda superior: #00ff00;
estilo de borda inferior: rgb (0, 0, 255);

Os lados da borda do CSS funcionam com a abreviação regular para combinar assim.

borda esquerda: 10px azul sólido;
fronteira-direita: 20px pontilhado #00ff00;
borda superior: 30px tracejado #ff0000;
borda inferior: 40px dobrorgb(0, 0, 255);

Valores de propriedade de contorno CSS

Assim como as bordas do CSS, os contornos têm uma propriedade própria; contorno-offset.

Deslocamento de contorno CSS

Adicionar um deslocamento a um contorno cria um espaço entre ele e o elemento principal. Esse deslocamento deve ser o mesmo para cada lado do contorno e a propriedade aceita apenas um valor.

deslocamento do contorno: 10px;

Essa pode ser uma maneira legal de usar uma terceira borda para seus elementos que corresponda à cor do plano de fundo.

Estilos de Borda e Contorno CSS

Tanto as bordas quanto os contornos precisam de um estilo para funcionar. Existem dez estilos disponíveis para escolher, incluindo bordas que não aparecem.

estilo de borda: sólido;
estilo de borda: pontilhado;
estilo de borda: tracejado;
estilo de borda: sulco;
estilo de borda: cume;
estilo de borda: dobro;
estilo de borda: inserção;
estilo de borda: início;
estilo de borda: oculto;
estilo de borda: nenhum;

As bordas compartilham os mesmos estilos com contornos, apenas com estilo de contorno definido como a propriedade.

Como usar bordas e contornos CSS

Contornos e bordas são ótimas ferramentas de design para criadores de sites. Você pode definir a aparência do seu site com essas propriedades CSS, mas precisará ser criativo.