Bordes Tipos CSS explicación y como usarlos

Con el atributo border-style o border podemos definir varios estilos de borde, entre una gama de posibilidades. Elegir el uno depende del gusto de cada cual.

Posibles estilos de borde:

* solid
* dotted
* double
* dashed
* groove
* ridge
* inset
* outset




A. Lo esencial

• Estilo solid:

<p style="border: solid 4px #FF8000; "> Un ejemplo de estilo de bordes con atributo solid </p>

Un ejemplo de estilo de bordes con atributo solid

- En CSS la instrucción sería: border: solid 4px #FF8000;


• Estilo dotted:

Un ejemplo de estilo de bordes con atributo dotted

<p style="border: dotted 3px #FF8000; "> Un ejemplo de estilo de bordes con atributo dotted</p>

- En CSS la instrucción sería: border: dotted 3px #FF8000;


• Estilo double:

Un ejemplo de estilo de bordes con atributo double

<p style="border: double 5px #5E610B; "> Un ejemplo de estilo de bordes con atributo double</p>

- En CSS la instrucción sería: border: double 5px #5E610B;


• Estilo dashed:

Un ejemplo de estilo de bordes con atributo dashed

<p style="border: dashed 5px #5E610B; "> Un ejemplo de estilo de bordes con atributo dashed</p>


- En CSS la instrucción sería: border: dashed 5px #5E610B;


• Estilo groove:

Un ejemplo de estilo de bordes con atributo groove

<p style="border: groove 8px #5E610B; "> Un ejemplo de estilo de bordes con atributo groove</p>


- En CSS la instrucción sería: border: groove 8px #5E610B;


• Estilo ridge:

Un ejemplo de estilo de bordes con atributo ridge

<p style="border: ridge 8px #5E610B; "> Un ejemplo de estilo de bordes con atributo ridge</p>


- En CSS la instrucción sería: border: ridge 8px #5E610B;


• Estilo inset:

Un ejemplo de estilo de bordes con atributo inset

<p style="border: inset 8px #8A084B; "> Un ejemplo de estilo de bordes con atributo inset</p>


- En CSS la instrucción sería: border: inset 8px #8A084B;


• Estilo outset:

Un ejemplo de estilo de bordes con atributo outset

<p style="border: outset 8px #8A084B; "> Un ejemplo de estilo de bordes con atributo outset</p>


- En CSS la instrucción sería: border: outset 8px #8A084B;

• Aclaración:

1º. Colocamos el atributo border.

2º. Elegimos el tipo de borde.

3º. "8px" es el grosor del borde. Ese número puede variar a nuestra elección.

4º. Coloco un color en forma hexadecimal.

B. Probando posibilidades, por practicar:

► Variantes con distintos bordes:

<p style=" border-bottom-color:#B4045F; border-bottom-style:dashed; border-bottom-width:5px; border-top-color:#5E610B; border-top-style:solid; border-top-width:8px;"> Un ejemplo de estilos de bordes con el inferior (border-bottom-color) y el superior ( border-top-color)</p>

Un ejemplo de estilos de bordes con el inferior (border-bottom-color) y el superior ( border-top-color)

► Otro ejemplo dentro de una tabla:

Un ejemplo de estilos de bordes

<table width="70%" align="center" cellspacing="10" cellpadding="0" style="border-bottom-color:#610B38;border-bottom-width:5px;border-bottom-style:solid;border-top-color:#3B0B0B;border-top-style:solid;border-top-width:5px; border-left-color:#FF8000; border-left-width:5px;border-left-style:solid;border-right-color:#FF0000; border-right-width:5px;border-right-style:solid;">

<tr>

<td style="border-color:#0B0B0B; border-style:dashed; border-width:2px;"> Un ejemplo de estilos de bordes</td>

</tr>

</table>


C. El terrible CSS dentro de una plantilla (rollo de cuidado)...

■ En CSS (dentro de la plantilla) podemos colocar bordes redondeados en las esquinas, pero hay navegadores que no lo soportan pej: Internet Explorer.

La instrucción clave es: -moz-border-radius a la que se le asigna una cifra en píxeles que hará de ángulo de la circunferencia (redondeo).

#HTML2 {

border: 5px solid #0B0B61;

-moz-border-radius: 10px;

padding: 11px;

}

Al atributo -moz-border-radius se le pueden definir distintos tipos de redondeo en cada esquina de la siguiente forma:

-moz-border-radius: 7px 27px 100px 0px;

Ejemplo en esta página con la formula:

#HTML2

border: 1px solid #000000;

-moz-border-radius: 7px 27px 100px 0px;

padding: 11px;

}

- Si se usa en CSS -moz-border-radius hay que definir el tipo de borde: solid, dotted, double ....

■ Por otro lado dentro del CSS se pueden definir por lados. Si es así quedaría de esta forma:

.bordeporlados{

border-top: 1px solid #ff9999;

border-right: 2px dotted #99ff99;

border-bottom: 2px dashed #9999ff;

border-left: 4px double #666666;

}

Es decir, borde de arriba, borde derecho, borde de abajo, borde izquierdo......

Lo esencial es la parte A, el resto son divagaciones y apuntes....