O fronteira é uma propriedade abreviada em CSS, usada para adicionar uma borda a um elemento. Permite-nos especificar a borda da caixa. Define a largura, o estilo e a cor da borda. Esta propriedade CSS inclui as seguintes propriedades de borda:

largura da borda:A propriedade border-width é usada para definir a largura da borda. Também podemos usar os valores predefinidos que são fino, médio, e espesso para definir a largura da borda. Define a espessura da borda. Seu valor padrão é médio .
Esta propriedade não pode ser usada sozinha. É sempre usado com outras propriedades de borda, como a propriedade 'border-style', para definir a borda primeiro; caso contrário, não funcionará.
A largura da borda pode ser diferente para cada lado individual. Isso pode ser feito usando a largura inferior da borda, largura da borda superior, largura da borda à direita , e largura da borda esquerda .estilo de borda:Esta propriedade especifica o estilo da borda. Define se a borda é sólida, pontilhada, tracejada, dupla, ranhura e um dos demais valores possíveis. Sem definir esta propriedade, ou seja, sem definir o estilo da borda, nenhuma das outras propriedades da borda funcionará. A borda ficará invisível sem especificar o estilo de borda . Isso ocorre porque o valor padrão desta propriedade CSS é nenhum .
Igual a largura da borda , o estilo da borda pode ser diferente para cada lado individual. Isso pode ser feito usando as propriedades estilo borda inferior, estilo borda superior, estilo borda direita , e estilo borda esquerda .Cor da borda:Permite-nos alterar a cor da borda. Podemos definir a cor usando o nome da cor, valor RGB ou valor hexadecimal. Semelhante ao largura da borda e estilo de borda , podemos alterar a cor da borda individualmente, ou seja, podemos alterar a cor dos lados inferior, superior, esquerdo e direito da borda de um elemento. Isso pode ser feito usando as propriedades cor da borda inferior, cor da borda superior, cor da borda direita , e cor da borda esquerda .
O Cor da borda propriedade não pode ser usada sozinha. Deve ser usado com outras propriedades de borda, como a propriedade 'border-style' para definir a borda; caso contrário, não funcionará.

borda vs. contorno

Embora as bordas e os contornos sejam muito semelhantes, existem algumas diferenças entre os contornos e as bordas:

• Usando um contorno, não podemos aplicar diferentes larguras, estilos e cores de contorno para os quatro lados de um elemento, enquanto, em uma borda, podemos aplicar o valor fornecido para todos os quatro lados de um elemento.
• A borda faz parte da dimensão do elemento, enquanto o contorno não faz parte da dimensão do elemento. Significa que não importa a espessura do contorno que aplicamos ao elemento, as dimensões dele não mudarão.

Vejamos um exemplo para entender a propriedade border.

Exemplo

 p{ border: 4px blue; font-size: 20px; color: red; text-align: center; } p.none {border-style: none;} p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} <p>No border.</p> <p>A dotted border.</p> <p>A dashed border.</p> <p>A solid border.</p> <p>A double border.</p> <p>A groove border.</p> <p>A ridge border.</p> <p>An inset border.</p> <p>An outset border.</p> <p>A hidden border.</p> 

Saída

Agora, há outro exemplo em que estamos usando ambos contorno e fronteira propriedades.

Exemplo

 div { border: 3px solid red; outline: 3px solid blue; border-radius: 12px; font-size: 20px; font-weight: bold; margin: 30px; padding: 30px; outline-offset: 0.5em; } <h3> Welcome to the javaTpoint.com </h3> In this div element, we are using both outline and border properties. The outline is represented by blue color and border is by red color. 

Saída