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:
Podemos añadir el borde en la zona que deseemos añadiendo la dirección de la siguiente forma:
Veamos un ejemplo:
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:
Opción 2: Esquinas redondeadas:
Se pueden añadir esquinas redondeadas a los bordes de la siguiente forma:
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:
Esta variable es parcialmente soportada por los navegadores (Internet Explorer 8 y anteriores, como Firefox 3.6 y anteriores no soportan esta característica).
Existen distintos tipos de bordes, entre los que se encuentran:
Este borde es el estándar, corresponde a un borde sencillo y plano:
Este borde es un borde con puntos, tal como se puede apreciar en el siguiente ejemplo:
Este es un borde entrecortado:
Double:
Este es un borde doble, el tamaño define el espaciado entre ellos:
Groove:
Esta opción de borde es un surco 3D:
Este borde es una versión invertida del Groove:
Este borde 3D es muy similar al Groove:
Este borde es la versión invertida del Inset:
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.
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;
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;
