As borderpropriedades CSS permitem que voc especifique o estilo, a

largura e a cor da borda de um elemento.

A border-style propriedade especifica o tipo de borda a ser exibida.

Os seguintes valores so permitidos:

dotted - Define uma borda pontilhada

dashed - Define uma borda tracejada
solid - Define uma borda slida
double - Define uma borda dupla
groove- Define uma borda 3D ranhurada. O efeito depende do
valor da cor da borda
ridge- Define uma borda 3D ridged. O efeito depende do valor da
cor da borda
inset- Define uma borda de insero 3D. O efeito depende do
valor da cor da borda
outset- Define uma borda de incio 3D. O efeito depende do valor
da cor da borda
none - Define nenhuma borda
hidden - Define uma borda oculta

A border-style propriedade pode ter de um a quatro valores (para a

borda superior, borda direita, borda inferior e a margem esquerda).

Exemplo
Exemplo
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.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Nota: Nenhuma das outras propriedades de borda CSS descritas abaixo

ter qualquer efeito, a menos que a border-stylepropriedade esteja
configurada!
Largura da borda
A border-widthpropriedade especifica a largura das quatro bordas.

A largura pode ser definida como um tamanho especfico (em px, pt, cm,
em, etc.) ou usando um dos trs valores pr-definidos: fino, mdio ou
grosso.

A border-widthpropriedade pode ter de um a quatro valores (para a

borda superior, borda direita, borda inferior e a margem esquerda).

5px de largura

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

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}

A border-colorpropriedade usada para definir a cor das quatro

bordas.

A cor pode ser definida por:

nome - especifique um nome de cor, como "vermelho"

Hex - especifique um valor hexadecimal, como "# ff0000"
RGB - especifique um valor RGB, como "rgb (255,0,0)"
transparente

A border-colorpropriedade pode ter de um a quatro valores (para a

borda superior, borda direita, borda inferior e a margem esquerda).

Se border-colorno estiver configurado, ele herda a cor do elemento.

Borda vermelha
Exemplo
p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: solid;
border-color: red green blue yellow;
}

Borda - lados individuais

Dos exemplos acima, voc viu que possvel especificar uma borda
diferente para cada lado.

Em CSS, tambm h propriedades para especificar cada uma das bordas

(superior, direita, inferior e esquerda):

Diferentes estilos de fronteira

Exemplo
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

O exemplo acima d o mesmo resultado que este:

Exemplo
p {
border-style: dotted solid;
}

Bordas arredondadas
A border-radiuspropriedade usada para adicionar bordas
arredondadas para um elemento:
Borda normal

Borda redonda

Borda Rounder

Borda mais redonda

Exemplo
p {
border: 2px solid red;
border-radius: 5px;
}

CSS PARA BORDA

Adicione bordas arredondadas para um elemento <div>:
div {
border: 2px solid;
border-radius: 25px;
}

Defina o estilo das quatro bordas:

p {
border-style: solid;
}

Defina a largura das quatro bordas:

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

Defina a cor das quatro bordas?

p {
border-style: solid;
border-color: #0000ff;
}