Estilos>>Bordes
Para poder aplicar bordes utilizando HTML era imprescindible crear tablas. Aparte de los problemas de accesibilidad está claro que lo que hacemos es utilizar un elemento cuya función es darle estructura al contenido para conseguir un formato gráfico en la presentación.
Gracias a las hojas de estilo podremos aplicarle bordes a cualquier elemento, incluso una palabra dentro de un párrafo y con variedad de efectos.
Aunque en ocasiones anteriores hemos colocado en último lugar la agrupación de propiedades de forma simplificada, en este caso presentamos en primer lugar la propiedad base para tenerla en cuenta como referencia dada la gran cantidad de posibles combinaciones de valores y propiedades. En el editor de CSS de N|VU podrás acceder a estas propiedades dentro de la pestaña
. Aunque verás un poco más adelante lo que se considera el orden normativo según las especificaciones verás que el editor de CSS de N|VU no se ajusta en este momento a ese orden y presenta las cajas para la introducción de valores en el orden superior, izquierdo, derecho e inferior en lugar del orden en sentido "horario".Utilizando el término border
podemos especificar todas las características aplicables a
los bordes sobre las que se puede incidir, que son el color, el grosor
y el tipo de trazo.
Antes de entrar a ver cada una de estas propiedades
particulares es conveniente tener en cuenta una cuestión
previa sobre la identificación de los bordes, porque tenemos
la posibilidad de indicar las propiedades de cada uno individualmente,
mientras que si utilizáramos la propiedad
genérica border
aplicaríamos los mismos valores a todos ellos.
Para referirnos a cada uno de los bordes del
rectángulo que rodea a cada elemento utilizamos las palabras
top
, right
, bottom
y left
. La enumeración no ha sido
al azar, sino que sigue el orden por defecto en sentido horario: borde
superior, derecho, inferior e izquierdo.
border-top
,
border-right
, border-bottom
y border-left
. Ej. border-top:solid red
thin
,
border-right:dotted green thin
; border-bottom:solid orange
thin; , etcborder:dashed
thin ; border-color:red blue green yellow
Como norma general respecto al orden cuando aplicamos cualquiera de las propiedades que veremos a continuación:
red
en este ejemplo)blue
y red
en este caso) orange
, lime
y maroon
) fuchsia
,
black
, navy
y silver
) Propiedad: border-color
Valores: podemos utilizar el nombre CSS o la referencia RGB de un color en cualquiera de sus notaciones tal como ya hemos visto.
Recuerda lo que acabas de ver sobre la cantidad de valores especificados para esta propiedad y su orden de aplicación.
Propiedad: border-style
Valores: tenemos una serie de palabras reservadas cuyo efecto puedes ver en los ejemplos.
Ejemplos:
solid
dotted
dashed
double
(si se
indica el grosor fino se ve como el borde simple o no se vé
según el navegador)
ridge
(el
efecto es más perceptible con bordes medios o gruesos)
inset
(el efecto es más perceptible con bordes medios o
gruesos)
outset
(el efecto es más perceptible con bordes medios o
gruesos)
Propiedad: border-width
Valores: Podemos especificar el grosor indicando un valor en cualquiera de las unidades admitidas, o bien mediante las palabras reservadas que se muestran en el ejemplo.
Ejemplos:
thin
medium
thick
ejemplo fijando un valor: 0,25 cm
Como ya se comentó al inicio del apartado podemos
agrupar las propiedades referentes al borde bajo una propiedad
abreviada border
a la que le
adjudicaríamos los valores correspondientes a grosor,
estilo, y color, pero teniendo en cuenta que al hacerlo así
solo podremos indicar un valor para cada propiedad que se
aplicaría a todos los bordes por igual.