Estilo CSS 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 CSS 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 CSS 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 CSS 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 CSS 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
CSS 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 CSS 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="2" style="border-collapse:separate;border-spacing:2px;border-color:#ddd;">
<tr>
<td> </td>
<td> </td>
</tr>
<tr><td> </td>
<td> </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;border-color:#ddd;">
<tr>
<td> </td>
<td> </td>
</tr>
<tr><td> </td>
<td> </td>
</tr>
</table>
Y mira a continuación el resultado visual de la misma:
Saludos, agradecido por la clase. Tengo una duda, quiero hacer una tabla tipo factura donde se coloque la informacion, cada columna de infomacion sera dividiva por bordes pero quisiera que la tabla tengo una altura minima del 60% de la hoja y las columnas muestren la división en el espacio en blanco
Jonay, si eso quieres lograr hazla como te dicen aqui, los estilos que quieras agregar tu, pues agregalos, hasta lograr lo que deseas. En cuanto a la altura, primero dale al la tabla una posición: absoluta, luego dile min-height: 60%;
Hola, si al estilo «border-bottom: 2px dashed #FF0000;» quisiera que hubiera un espacio más amplio entre el texto «Un ejemplo de estilos de bordes» y el borde punteado de abajo, ¿cómo se haría? Veo que el punteado rojo queda muy pegado al texto, para que el borde no esté tan pegado al texto, y que hubiera un dedo o dos de espacio. Gracias.