| |
|---|
|
|
- Introducción
- PROPIEDADES DE LOS BORDES
- Propiedades border-width (Anchura)
- Propiedad "Shorthand" (Border-Width)
- Propiedades Border-Color
- Propiedad "Shorthand" (Border-color)
- Propiedades Border-Style. (Estilos De Borde)
- Propiedad "Shorthand" (Border-Style)
- BORDES MULTIPLES
- ATAJO: BORDES
- BORDES ESPECIFICOS
- Fuentes | Bibliografía
Podemos definir el borde de cualquier elemento HTML mediante las propiedades que vamos a ver a continuación. Podemos definir además distintas propiedades para cada uno de los cuatro lados del elemento. Las propiedades las veremos en grupos de cuatro, en ellas se distingue mediante las palabras:
top: el lado superior.right: el lado derecho.bottom: el lado inferior.left: el lado izquierdo.
En CSS es posible especificar el aspecto que tendrán los bordes de cualquier elemento, pudiendo incluso, dar valores distintos a las diferentes zonas predeterminadas del elemento (zona superior, izquierda, derecha o zona inferior).
CSS permite modificar el aspecto de cada uno de los cuatro bordes de la caja de un elemento. Para cada borde se puede establecer su anchura o grosor, su color y su estilo, por lo que en total CSS define 20 propiedades relacionadas con los bordes.
IR A PORTAFOLIOLas propiedades básicas existentes de los bordes en CSS son las siguientes:
| Propiedad | Valor | Significado |
|---|---|---|
border-color |
Especifica el color que se utilizará en el borde. | |
border-width |
thin | medium | thick | |
Especifica un tamaño predefinido para el grosor del borde. |
border-style |
none | |
Define el estilo para el borde a utilizar (ver más adelante). |
Las propiedades border-width controlan la anchura de los bordes, y se controla con las cuatro propiedades siguientes::
| Propiedades | border-top-width, border-right-width, border-bottom-width, border-left-width |
|---|---|
| Valores | ( unidad de medida | thin | medium | thick ) | inherit |
| Se aplica a | Todos los elementos |
| Valor inicial | Medium |
| Descripción | Establece la anchura de cada uno de los cuatro bordes de los elementos |
Aclarando términos:.
border-top-width ----> Anchura del borde superiorborder-right-width ----> Anchura del borde derecho
border-bottom-width ----> Anchura del borde inferior
border-left-width----> Anchura del borde izquierdo
Los valores de la anchura de los bordes se indica mediante una medida (en cualquier unidad de medida absoluta o relativa) o mediante las palabras clave thin (borde delgado), medium (borde normal) y thick (borde ancho).
La unidad de medida más habitual para establecer el grosor de los bordes es el píxel, ya que es la que permite un control más preciso sobre el grosor. Las palabras clave apenas se utilizan, ya que el estándar CSS no indica explícitamente el grosor al que equivale cada palabra clave, por lo que pueden producirse diferencias visuales entre navegadores. Así por ejemplo, el grosor medium equivale a 4px en algunas versiones de Internet Explorer y a 3px en el resto de navegadores.
El siguiente ejemplo muestra un elemento con cuatro anchuras diferentes de borde:
Figura Ejemplo de propiedad border-width
Las reglas CSS utilizadas se muestran a continuación:
div {
border-top-width: 10px;
border-right-width: 1em;
border-bottom-width: thick;
border-left-width: thin;
}Si se quiere establecer de forma simultánea la anchura de todos los bordes de una caja, es necesario utilizar una propiedad "shorthand" llamada border-width la cual permite indicar las propiedades anteriores de forma resumida: :
| Propiedad | border-width |
|---|---|
| Valores | ( unidad de medida | thin | medium | thick ) {1, 4} | inherit |
| Se aplica a | Todos los elementos |
| Valor inicial | Medium |
| Descripción | Establece la anchura de todos los bordes del elemento |
La propiedad border-width permite indicar entre uno y cuatro valores para poder establecer la anchura o grosor del borde, utilizando indistintamente tanto palabras clave predefinidas (thin, medium, thick) como un tamaño concreto con cualquier tipo de las unidades de medida ya vistas.
Si se recurre al método de las palabras claves, el significado de cada caso es el habitual de las propiedades "shorthand":
p { border-width: thin } /* thin thin thin thin */
p { border-width: thin thick } /* thin thick thin thick */
p { border-width: thin thick medium } /* thin thick medium thick */
p { border-width: thin thick medium thin } /* thin thick medium thin */En el caso cuando se usa unidad de medida, el número de valores indicado va a significar lo siguiente:
- Si se indica un valor: Se aplica a los cuatro bordes.
- Si se indican dos valores: El primero se aplica al borde superior e inferior, y el segundo al borde izquierdo y derecho.
- Si se indican tres valores: El primero se aplica al borde superior, el segundo a los bordes izquierdo y derecho, y el tercero al borde inferior.
- Si se aplican cuatro valores: El orden de aplicación es superior, derecho, inferior, izquierdo.
Ejemplo de anchura de los bordes
<p style="border-width: thin"> Este es un párrafo con el borde delgado, su valor es thin.</p> <p style="border-width: medium"> Este es un párrafo con el borde normal, su valor es medium.</p> <p style="border-width: thick"> Este es un párrafo con el borde ancho, su valor es thick.</p> <p style="border-width: 2px 4px 6px 8px;"> Este es un párrafo con distintos valores en sus bordes: borde superior: 2px; borde derecho 4px; borde inferior 6 px y borde izquierdo 8 px.</p>Pulsa el enlace anexo para verlo en una Página de ejemplo
IR A PORTAFOLIO
La propiedad border-color establece el color del borde, y se controla con las cuatro propiedades siguientes:
| Propiedades | border-top-color, border-right-color, border-bottom-color, border-left-color |
|---|---|
| Valores | color | transparent | inherit |
| Se aplica a | Todos los elementos |
| Valor inicial | - |
| Descripción | Establece el color de cada uno de los cuatro bordes de los elementos |
La palabra clave transparent crea un margen transparente.
El número de valores indicado se interpreta exactamente igual que para la propiedad anterior (border-width).
Aclarando términos:.
border-top-color ----> Color del borde superiorborder--right-color ----> Color del borde derecho
border-bottom-color ----> Color del borde inferior
border--left-color----> Color del borde izquierdo
El ejemplo usado anteriormente se puede modificar para mostrar cada uno de los bordes de un color diferente:
Figura Ejemplo de propiedad border-color
Las reglas CSS necesarias para mostrar los colores anteriores son las siguientes:
div {
border-top-color: #CC0000;
border-right-color: blue;
border-bottom-color: #00FF00;
border-left-color: #CCC;
}CSS incluye una propiedad "shorthand" llamada border-color para establecer de forma simultánea el color de todos los bordes de una caja:
| Propiedad | border-color |
|---|---|
| Valores | ( color | transparent ) {1, 4} | inherit |
| Se aplica a | Todos los elementos |
| Valor inicial | - |
| Descripción | Establece el color de todos los bordes del elemento |
En este caso, al igual que sucede con la propiedad border-width, es posible indicar de uno a cuatro valores y las reglas de aplicación son idénticas a las de la propiedad border-width.
Pulsa para ver una página de ejemplo
IR A PORTAFOLIO
Por último, con las propiedades border-style podemos aplicar un estilo determinado al borde de un elemento, y su definición es la siguiente:
| border-top-style border-right-style border-bottom-style border-left-style |
estilo del borde superior Estilo del borde derecho Estilo del borde inferior Estilo del borde izquierdo |
|---|---|
| Valores | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit |
| Descripción | Establece el estilo de cada uno de los cuatro bordes de los elementos |
| Valor inicial | none |
| se aplica a | todos los elementos |
Los valores para esta propiedad sólo pueden indicarse mediante alguna de
las palabras reservadas. El estilo por defecto es none; es por esto
que los elementos no muestran ningún borde visible, a menos que se establezca
explícitamente un estilo de borde.
En estilo de borde podemos elegir cualquiera de las siguientes opciones:
| Valor | Descripción |
|---|---|
| hidden | Oculto. Idéntico al anterior salvo para conflictos con tablas. |
| dotted | Establece un borde basado en puntos. |
| dashed | Establece un borde basado en rayas (línea discontínua). |
| solid | Establece un borde sólido (línea contínua). |
| double | Establece un borde doble (dos líneas contínuas). |
| groove | Establece un borde biselado con luz desde arriba. |
| ridge | Establece un borde biselado con luz desde abajo. Opuesto a groove. |
| inset | Establece un borde con profundidad «hacia dentro». |
| outset | Establece un borde con profundidad «hacia fuera». Opuesto a inset. |
Acà un ejemplo sencillo, aplicando las propiedades color, width, style:
div {
border-color: gray;
border-width: 1px;
border-style: dotted;
}
Sin embargo, el borde más frecuente suele ser solid, que no es más que un borde liso. Pueden utilizarse cualquiera de los estilos indicados en la tabla anterior. Veamos como se verían los diferentes estilos de borde utilizando 10 píxels de grosor y color gris:
También podemos establecer el estilo de los bordes mediante la utilización de una propiedad de tipo "shorthand", que permiten indicar las propiedades anteriores de forma resumida:
| border-style | Estilo del borde |
|---|---|
| Valores | (none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ) {1, 4} | inherit |
| Descripción | Establece el estilo de todos los bordes del elemento |
| Valor inicial | - |
| se aplica a | todos los elementos |
La propiedad border-style permite indicar entre uno y cuatro valores, que serán las palabras claves indicadas. El número de valores indicado se interpreta exactamente igual que para las propiedades anteriores.
En la siguiente página de ejemplo se muestra es aspecto que tienen los diferentes valores de la propiedad.
Los valores más usados son solid para una línea simple y double para una línea doble. Los estilos dotted y dashed muestras una línea de puntos y una linea discontinua respectivamente.
IR A PORTAFOLIO
Hasta ahora, sólo hemos utilizado un parámetro en cada propiedad, lo que significa que se aplica el mismo valor para cada borde de un elemento (borde superior, borde derecho, borde inferior y borde izquierdo). Sin embargo, podemos especificar uno, dos, tres o cuatro parámetros, dependiendo de lo que queramos hacer:
| Propiedad | Valor | Significado |
|---|---|---|
border-color |
1 parámetro. Aplica el mismo color a todos los bordes. | |
| 2 parámetros. Aplica al borde top/bottom, y al left/right. | ||
| 3 parámetros. Aplica al top, al left/right y al bottom. | ||
| 4 parámetros. Aplica al top, right, bottom y left. |
De la misma forma, podemos hacer exactamente lo mismo con las propiedades border-width (respecto al ancho del borde) y border-style (respecto al estilo del borde). Teniendo en cuenta esto, disponemos de mucha flexibilidad a la hora de especificar esquemas de bordes más complejos:
div {
border-color: red blue green;
border-width: 2px 10px 5px;
border-style: solid dotted solid;
}
En el ejemplo anterior hemos utilizado 3 parámetros, indicando un elemento con borde superior rojo sólido de 2 píxeles de grosor, con borde izquierdo y derecho punteado azul de 10 píxeles de grosor y con un borde inferior verde sólido de 5 píxeles de grosor.
IR A PORTAFOLIOPero ya habremos visto que con tantas propiedades, para hacer algo relativamente sencillo, nos pueden quedar varias lineas de código complejas y difíciles de leer. Al igual que con otras propiedades CSS, podemos utilizar la propiedad de atajo border, con la que podemos hacer un resumen y no necesitar utilizar las propiedades individuales por separado, realizando el proceso de forma más corta:
| Propiedad | Valor | Significado |
|---|---|---|
border |
Propiedad de atajo para simplificar valores. |
Por ejemplo:
div {
border: 1px solid #000000;
}
Así pues, estamos aplicando un borde de 1 píxel de grosor, estilo sólido y color negro a todos los bordes del elemento, ahorrando mucho espacio y escribiéndolo todo en una sola propiedad.
IR A PORTAFOLIOConsejo: Intenta organizarte y aplicar siempre los atajos si es posible. Ahorrarás mucho espacio en el documento y simplificarás la creación de diseños. El orden, aunque no es obligatorio, si es recomendable para mantener una cierta coherencia con el estilo de código.
Otra forma, quizás más intuitiva, es la de utilizar las propiedades de bordes específicos (por zonas) y aplicar estilos combinándolos junto a la herencia de CSS. Para utilizarlas bastaría con indicarle la zona justo después de border-:
div {
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: black;
}
Esto dibujaría sólo un borde inferior negro de 2 píxeles de grosor y con estilo punteado. Ahora imaginemos que queremos un elemento con todos los bordes en rojo a 5 píxeles de grosor, salvo el borde superior, que lo queremos con un borde de 15 píxeles en color naranja. Podríamos hacer lo siguiente:
div {
border: 5px solid red;
border-top-width: 15px;
border-top-color: orange;
border-top-style: solid; /* Esta propiedad no es necesaria (se hereda) */
}
El ejemplo anterior conseguiría nuestro objetivo. La primera propiedad establece todos los bordes del elemento, sin embargo, las siguientes propiedades modifican sólo el borde superior, cambiándolo a las características indicadas.
Recuerda que también existen atajos para estas propiedades de bordes en zonas concretas, lo que nos permite simplificar aún más el ejemplo anterior, haciéndolo más fácil de comprender:
div {
border: 5px solid red;
border-top: 15px solid orange;
}
IR A PORTAFOLIOOjo: Es muy importante entender como se está aplicando la herencia en los ejemplos anteriores, puesto que es una de las características más complejas de dominar de CSS junto a la cascada. Por ejemplo, si colocaramos el
border-topantes delborder, este último sobreescribiría los valores deborder-topy no funcionaría de la misma forma.
