Propriedade de Bordas em CSS – CSS Border

Saiba tudo sobre as propriedades de bordas em CSS neste tutorial do Portal do Economaster.

Propriedades das Bordas em CSS:

border-width: espessura da borda
border-style: estilo da borda
border-color: cor da bordaborder-top-width: espessura da borda superior
border-top-style: estilo da borda superior
border-top-color: cor da borda superiorborder-right-width: espessura da borda direita
border-right-style: estilo da borda direita
border-right-color: cor da borda direitaborder-bottom-width: espessura da borda inferior
border-bottom-style: estilo da borda inferior
border-bottom-color: cor da borda inferiorborder-left-width: espessura da borda esquerda
border-left-style: estilo da borda esquerda
border-left-color: cor da borda esquerdaborder-top: todas as bordas superior
border-right: todas as borda direita
border-bottom: todas as bordas inferior
border-left: todas as bordas esquerda
border: todas as quatro bordas

Valores das Propriedades das Bordas em CSS:

CÓDIGO DE CORES:
hexadecimal: #FF6347
rgb: rgb(255, 99, 71)
rgba: rgb(255, 99, 71, 0.7)
hsl: hsl(9, 100%, 64%)
CMY: 0.0000, 0.6118, 0.7216
CMYK: 0.00, 0.61, 0.72, 0.00
palavra-chave: tomato, red, blue, green entre outras cores web
transparente: transparentstyle:
none: nenhuma borda
hidden: equivalente a none
dotted: borda pontilhada
dashed: borda tracejada
solid: borda contínua
double: borda dupla
groove: borda entalhada
ridge: borda em ressalto
inset: borda em baixo relevo
outset: borda em alto relevowidth:
thin: borda fina
medium: borda média
thick: borda grossa
length: unidade de medida CSS (px, pt, em, cm, ...)

Veja as propriedades na Prática:

No HTML:

<h3>Borda média, contínua e azul</h3>
<p>Borda 6px, tracejada e vermelha</p>

No CSS:

h3 {
border-width: medium;
border-style: solid;
border-color: #00f;
}p {
border-width: 6px;
border-style: dashed;
border-color: #f00;
}

O visual do documento HML será:

Borda média, contínua e da cor Tomato

Borda 6px, tracejada e da cor Tomato

Para ver a tabela de cores web nomeadas visite TABELA DE CORES WEB NOMEADAS

A Propriedade CSS border-style

No HTML

Exemplo de todos os tipos de propriedades border-style no CSS.

<p>none e hidden - sem borda</p>
<p>solid - borda contínua</p>
<p>double - borda dupla</p>
<p>dotted - borda pontilhada</p>
<p>dashed - borda tracejada</p>
<p>groove - borda entalhada</p>
<p>ridge - borda em ressalto</p>
<p>inset - borda em baixo relevo</p>
<p>outset - borda em alto relevo</p>

No CSS:

No exemplo CSS abaixo só utilizarei um exemplo, mas na prática é só alterar a propriedade border-style.

p {
border-style solid;
text-align: center;
}

Abaixo os exemplos práticos de estilos de bordas

none e hidden – sem borda

solid – borda contínua

double – borda dupla

dotted – borda pontilhada

dashed – borda tracejada

groove – borda entalhada

ridge – borda em ressalto

inset – borda em baixo relevo

outset – borda em alto relevo

asdasda

A Propriedade CSS border-width

No HTML:

<p>Borda com espessura à esquerda de 3px e inferior de 5px</p>

No CSS:

p {
border-style: solid;
border-bottom-width: 5px;
border-top-width: 0;
border-right-width: 0;
border-left-width: 3;
}

Na prática você terá esse efeito:

Borda com espessura inferior de 5px e à esquerda de 3px

asdasdasdasda

A Propriedade CSS border (declaração única)

Você pode também declarar todos os valores de maneira abreviada

No HTML:

<p>Bordas em declaração única</p>

No CSS:

p{
thick groove tomato
}

Na prática você terá esse efeito:

Bordas em declaração única

Nota importante para declarações em CSS para bordas

Siga esta hierarquia para declarar seus documentos CSS de Bordas:

border-width: medida da borda
border-style: o estilo da borda
border-color: a cor da borda (se não declarado a borda será preta)

Veja alguns exemplos de aplicações no CSS:

solid border /* borda contínua, espessura média, cor preta automática */
15px ridge border /* borda em ressalto, espessura 15px, cor preta automática */
double green border /* borda dupla, espessura média, cor verde */
10px solid red border /* borda contínua, espessura 10px, cor vermelha */

Você também pode declarar o estilo CSS de bordas diretamente no HTML, porém alguns navegadores, principalmente os não atualizados podem dar algum erro. mas é algo que a se postar pois facilita e muito a vida dos desenvolvedores.

Exemplo usado nesta página:

<p style="border: 10px solid tomato; text-align: center;">solid - borda contínua</p>

No caso a declaração style, com efeito,  se refere ao estilo do parágrafo que tem uma borda sólida de 10 pixels da cor tomato e alinhamento centralizado. Assim sendo, dê uma olhada e tente achar nos exemplos desta página para entender melhor.

Ou seja, este tipo de aplicação serve para outras marcações como títulos, iframes, divs entre outras.

Concluindo, uma verdadeira mão na roda na hora de escrever códigos em HTML e CSS na unha como eu faço. Risos.

Aliás, espero que tenha gostado dessa postagem.

Certamente esses websites também podem te interessar:

• Origamania.com – Origamis, papel modelismo, artesanatos e aviões de papel.
• Textículos.com – Significados de Nomes, frases famosas, ferramenta de textos e letras diferentes, e muito mais.
• Portal do Economaster – Economia e Finanças de um jeito fácil de entender.
• Cardápio de Receitas – Receitas de dar água na boca. Tudo o que você precisa pra fazer uma boa receita.

Por fim, veja mais conteúdos do Web-ZoneWare, seu site de tecnologia na web a fim de encontrar o que precisa.