AyudaBloggers{...}
Bordes con CSS
Ya sabemos que CSS tiene cientas de variables, podemos hacer cosas increíbles sólo con añadir o modificar unos cuántos valores sencillos.

En esta oportunidad mostraré cómo crear bordes y mostraré las distintas cosas que podemos hacer con ellos.


El borde se utiliza de la siguiente forma:
border: 2px solid #c4c4c4;
  • El valor ''2px'' corresponde al ancho del borde.
  • El valor ''solid'' corresponde al estilo del borde.
  • El valor ''#c4c4c4'' corresponde al color del borde.
Se pueden agregar de distintas formas y en distintas ubicaciones.

Opción 1: Las direcciones:

Podemos añadir el borde en la zona que deseemos añadiendo la dirección de la siguiente forma:

  • border-left (Izquierda)
  • border-right (Derecha)
  • border-top (Arriba)
  • border-bottom (Abajo)

Veamos un ejemplo:

                                  
border-top: 7px solid #000;

Como vemos he añadido un borde en la zona superior al cuadro, se pueden añadir mas bordes, añadiendo 2 o más líneas:

                                  
border-top: 7px solid #000;
border-left: 7px solid #000;


Opción 2: Esquinas redondeadas:

Se pueden añadir esquinas redondeadas a los bordes de la siguiente forma:
border-radius:5px;

Se puede aumentar o disminur el tamaño para aumentar el margen de las esquinas.

Al igual que la forma anterior, tiene ubicaciones, pero éstas se escriben de la siguiente forma:

border-radius: 4px 4px 4px 4px;
Cada valor corresponde a una dirección.


Esta variable es parcialmente soportada por los navegadores (Internet Explorer 8  y anteriores, como Firefox 3.6 y anteriores no soportan esta característica).


Opción 3: Tipos de bordes:


Existen distintos tipos de bordes, entre los que se encuentran:


Solid:

Este borde es el estándar, corresponde a un borde sencillo y plano:

                                  

border: 7px solid #000;

Dotted:

Este borde es un borde con puntos, tal como se puede apreciar en el siguiente ejemplo:

                                  

border: 7px dotted #000;


Dashed:

Este es un borde entrecortado:

                                  

border: 7px dashed #000;

Double:


Este es un borde doble, el tamaño define el espaciado entre ellos:


                                  

border: 7px double #000;

Groove:

Esta opción de borde es un surco 3D:

                                  

border: 7px groove #000;


Ridge:

Este borde es una versión invertida del Groove:

                                  

border: 7px ridge #000;


Inset:

Este borde 3D es muy similar al Groove:

                                  

border: 7px inset #000;

Outset:

Este borde es la versión invertida del Inset:


                                  

border: 7px outset #000;
Escrito por
víctor calderon

Víctor Calderón es un jóven chileno de 21 años, estudiante analista programador y orgulloso padre de una hermosa niña.

Moderador en +TBEE y escritor/fundador de este blog.

tweet

Blogroll de Ayuda Bloggers