Bordes Tipos CSS explicación y como usarlos

LuJo
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....


5 comentarios:

LadyMarian

Qué increíble! Qué cantidad de opciones! Además hay que tener en cuenta la combinación de colores, grosor, etc.

Muy buen entrada! Muy bien explicado!
Me gustan las combinaciones de colores que elegiste para groove/ridge y para inset/outset.

Besos

joselop44

No sabía que se pudiera jugar así con los bordes.
Un abrazo

Lujo

Holaaaa LadyMarian
Bueno, es una recopilación de apuntes para no tener que buscarlos continuamente.
Son sólo herramientas que se usan de forma habitual.
No son ningún secreto de estado ;P (-^o^-)
Abrazotes intensos!!!


Holaaaa Joselop
Mientras lo hacía pensaba que es cuestión de tiempo entretenerse con estos detalles!!
Abrazotes!!!

Eloisa Benitez Millan

gracias....estare aqui mas seguido...porque hay interesantes `
posibilidades para aprender

Lujo

@Eloisa Benitez Millan
Gracias!
Saludotes!

Publicar un comentario en la entrada

(-^o^-) (^_-) (#^_^#) (ÖoÖ) (*^o^*) (>_<) ( ̄へ ̄)(;_・) (ô_Ó) (O_O) (ˇ~ˇ) (ToT)(Q____Q) ಠ_ಠ (。◕‿◕) [(--)]ZZzzz

- Si el comentario es anónimo hay muchas posibilidades que no se publique.

 


UP