Bordes en CSS

Todo obxecto HTML ten un borde que normalmente non se visualiza e ten un valor fixo que determina o propio navegador.
Principalmente temos tres características esenciais:

border-color - Código de cor
border-style – estilo – Admite none (ninguno), dotted (punteado), dashed (raiado), solid (solido), double (dobre), groove (efecto 3D con estrias), ridge (efecto 3D con borde elevado) , inset (efecto 3D fundido) e outset (efecto 3D elevado).
Esta característica pode non ser soportada por tódolos navegadores. Debe ser especificada obrigatoriamete para que se visualice o borde, posto que o valor por defecto e none.
border-width – anchura do borde. Admite thin (delgado), medium (medio), tick (grueso), porcentaxes ou calquer unidade de medida.

Cada característica incluso pode ser distintas para cada un dos catro lados dun obxecto HTML espepcificando aisladamente a característica para o lado.

border-top-color, border-bottom-color, border-left-color, border-right-color
border-top-style, border-bottom-style, border-left-style, border-right-style
border-top-width, border-bottom-width, border-left-width, border-right-width

Exemplo de regras de estilo:

.bordeInferior{
border-bottom-style: ridge;
border-bottom-width: thick;
border-bottom-color: red;
}
.bordeOutset {
border-style:outset;
border-width:medium;
borderer-color:blue;
}
.bordesVarios{
border-bottom-style: solid;
border-bottom-width: 3px;
border-bottom-color: brown;

border-top-style: double;
border-top-width: 5%;
border-top-color: yellow;

border-left-style: dashed;
border-left-width: thin;
border-left-color: blue;

border-right-style: dotted;
border-right-width: thin;
border-right-color: blue;
}

Exemplo de código:

Diferentes tipos de bordes
Borde Outset medio
Paragrafo con distintos tipos de bordes

Visualización: (Pode verse diferente en distintos navegadores)

Diferentes tipos de bordes

Borde Outset medio

Paragrafo con distintos tipos de bordes

Seguinte