Tipos de Borda Css

Tipos de Borda Css

Estilos de borda com CSS – A propriedade CSS border

Neste artigo vamos abordar sobre um dos elementos que mais utilizamos no Box Model, que é a propridade border no css

veja como adicionar bordas com CSS aplicando A propriedade border
As bordas são elementos que servem para separar e estilizar o layout página

As bordas são usadas para marcar, delimitar e separar uma região no layout do site.
Com a flexibilidade do CSS, podemos definir onde nossa borda pode ser aplicada: Cima, baixo, esquerda, direita ou em toda Região.

Veja quais os tipos de bordas que podemos usar:

border-top: Acima do um elemento

border-lefet: Borda do lado Esquerdo.

border-right: Borda do lado Direito.

border-bottom: Bordar Abaixo do elemento.

border-color: A cor da borda.

border-width : A espessura da borda.

Veja na prática no css:

.borda-cima  { 

    border-top:5px #eac1c1 solid; 
}

.borda-baixo { 

    border-bottom:5px #9cc3ff solid; 
}

.borda-esquerda { 

    border-left:5px #ff8f59 solid; 
}

.borda-direita { 

    border-right:5px #acacac solid; 

}

Veja os estilo de bordas que podemos usar:

o css nos permite estilizar essa borda de várias maneiras. através da propriedade border-style.
Dentro dos possíveis valores, vamos ressaltar os principais:

border: solid – Aplica a borda sólida que mais utilizamos.

border: double – Aplica-se duas linhas mais finas como borda

border: dotted – Efeito de borda pontilhada.

border : dashed – Efeito de borda tracejado

border: none – Tira borda

Veja na prática no Css:

.borda-linha  { 

    border:5px #ffd9d9 solid; 
}

.borda-tracejada { 

    border:5px #9cc3ff dashed; 
}

.borda-pontilhada { 

    border:5px #957b6f dotted; 
}

.borda-dupla { 

    border:5px #ec8181 double; 
}

.borda-none { 

    border:none; 

}

Tipos de borda css veja o Resultado abaixo !

Baixar Código Veja Funcionando