HTML    •    CSS

Introducción a las CSS.
Formas de aplicar CSS I.
Formas de aplicar CSS II.
Pseudoclases.
Unidades de medida.
Estilos de fuentes.
Estilos de párrafos.
Estilos de fondo.
Estilos de bordes.
Margin y Padding.
Float y Clear.
Position, left y top.
Width y height.
Altura de las capas.
Visibility y display.
Overflow.
Scrollbar.
Inicio > Curso de CSS (hojas de estilo) > Estilos de bordes.

Estilos de bordes.

Estilo border-color
Este estilo nos  permite indicar el color del borde del elemento al que se lo aplicamos. Este color se le indica con el modo RGB o con el nombre del color.

Podemos aplicar el color a todos los bordes con el atributo “border-color” o podemos indicar el color de cada borde mediante los atributos “border-top-color” para el borde de arriba, “border-right-color” para el borde de la derecha, “border-bottom-color” para el borde de abajo y “border-left-color” para el de la izquierda.

Estilo border-style

Este estilo nos  permite indicar el estilo del borde del elemento al que se lo aplicamos.

Podemos aplicar el estilo a todos los bordes con el atributo “border-style” o podemos indicar el estilo de cada borde mediante los atributos “border-top-style” para el borde de arriba, “border-right-style” para el borde de la derecha, “border-bottom-style” para el borde de abajo y “border-left-style” para el de la izquierda.

Estilo border-width

Este estilo nos  permite indicar el tamaño del borde del elemento al que se lo aplicamos. El tamaño se lo debemos indicar con alguna de las unidades CSS.

Podemos aplicar el tamaño a todos los bordes con el atributo “border-width” o podemos indicar el tamaño de cada borde mediante los atributos “border-top-width” para el borde de arriba, “border-right-width” para el borde de la derecha, “border-bottom-width” para el borde de abajo y “border-left-width” para el de la izquierda.

Estilo border

El estilo border utilizado sólo, sirve para establecer los atributos que le indiquemos a los cuatro bordes del elemento al que se lo aplicamos. Al border podemos especificarle un “width”, un “style “ y un “color” y éstos se aplicarán a los cuatro bordes del elemento.

A continuación vamos a ver unos cuantos ejemplos. En el primero de ellos veremos un elemento con borde sólido, de color negro y con una anchura de un píxel. Éste sería su código:

<p style="border: solid 1px #000000; "> Un ejemplo de estilos de bordes </p>

Y este sería el resultado visual:

Un ejemplo de estilos de bordes

Ahora vamos a ver el ejemplo de un elemento con un borde bajo a puntos, de anchura 2 pixeles y color rojo, y un borde arriba sólido, azul y de anchura 1 pixel. Este es su código:

<p style=" border-bottom-color:#FF0000; border-bottom-style:dashed; border-bottom-width:2px; border-top-color:#000099; border-top-style:solid; border-top-width:1px;"> Un ejemplo de estilos de bordes </p>
Y este es el resultado:

Un ejemplo de estilos de bordes

Y para finalizar veremos una tabla que reúne muchas de los estilos que hemos explicado anteriormente. Primeramente el código…

<table width="60%" align="center" cellspacing="10" cellpadding="0" style="border-bottom-color:#000000;border-bottom-width:3px;border-bottom-style:solid;border-top-color:#000000;border-top-style:solid;border-top-width:3px; border-left-color:#FF0000; border-left-width:3px;border-left-style:solid;border-right-color:#FF0000; border-right-width:3px;border-right-style:solid;">
  <tr>
    <td style="border-color:#666666; border-style:dashed; border-width:2px;"> Un ejemplo de estilos de bordes</td>
  </tr>
</table>
Y aquí tenemos el resultado:

Un ejemplo de estilos de bordes

border-collapse

El estilo border-collapse determina como se mostrarán y se comportarán los bordes de elementos contiguos en las tablas. Este estilo admite dos valores: collapse y separate. El atributo collpase le indica a los bordes que deben solaparse, mostrando uno sólo. El atributo separate muestra los dos bordes contiguos, sin que éstos se solapen.

Vamos a ver a continuación dos ejemplos de border-collapse. El primero de ellos tiene un collapse: separate. Observa el código:

<table width="100%" border="1" cellpadding="0" cellspacing="1" bordercolor="#000000" style="border-collapse:separate;">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr><td>&nbsp;</td>
 <td>&nbsp;</td>
</tr>
</table>

Y a continuación podrás ver el resultado:

   
   

Este otro código pertenece a una tabla con border-collapse:collapse. Observala primero…

<table width="100%" border="1" cellpadding="0" cellspacing="1" bordercolor="#000000" style="border-collapse:collapse;">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr><td>&nbsp;</td>
 <td>&nbsp;</td>
</tr>
</table>

Y mira a continuación el resultado visual de la misma:

   
   
<< Estilos de fondo. Margin y Padding. >>

Artículo escrito por Alberto Gómez para HazUnaweb.com. Queda absolutamente prohibida su reproducción.  


© HazUnaWeb.com. Tutoriales y manuales de programación y diseño de páginas web. :: Contacto :: Aviso legal
Queda absolutamente prohibida la copia o reproducción total o parcial de los contenidos de este página.