- Página Inicial
- Códigos CSS Prontos
- Tipos de Borda Css
- Voltar
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
Publicado por: Loop Nerd
665 Visualizações
Deixe um comentário