Valor: <anchura-de-borde-superior> || <estilo-de-border> || <color>
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta es una propiedad abreviada para establecer la anchura, estilo y color del borde superior de un elemento.
H1 { border-bottom: thick solid red }
La regla de este ejemplo establecerá la anchura, estilo y color del borde inferior del elemento H1. Si hay valores omitidos se igualarán a sus valores iniciales:
H1 { border-bottom: thick solid }
Al haberse omitido el valor del color en este último ejemplo, el color del borde será el mismo que el valor de 'color' del propio elemento.
Obsérvese que mientras que la propiedad 'border-style' acepta hasta cuatro valores, esta propiedad sólo acepta un valor de estilo.
Valor: <anchura-de-borde-derecho> || <estilo-de-borde> || <color>
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta es una propiedad abreviada para establecer la anchura, estilo y color del borde derecho de un elemento. Por lo demás es equivalente a la propiedad 'border-top'.
Valor: <anchura-de-borde-inferior> || <estilo-de-borde> || <color>
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta es una propiedad abreviada para establecer la anchura, estilo y color del borde inferior de un elemento. Por lo demás es equivalente a la propiedad 'border-top'.
Valor: <anchura-de-borde-izquierdo> || <estilo-de-borde> || <color>
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta es una propiedad abreviada para establecer la anchura, estilo y color del borde izquierdo de un elemento. Por lo demás es equivalente a la propiedad 'border-top'.
Valor: <anchura-de-borde> || <estilo-de-borde> || <color>
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
La propiedad 'border' es una propiedad abreviada para establecer la misma anchura, color y estilo en los cuatro bordes de un elemento. Por ejemplo, la primera regla del ejemplo siguiente es equivalente al conjunto de cuatro reglas que siguen a continuación:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
A diferencia de las propiedades abreviadas 'margin' y 'padding', la propiedad 'border' no puede establecer valores distintos para cada borde. Para ello debe utilizarse una o más de las otras propiedades de borde.
Como las propiedades tienen hasta cierto punto funcionalidades comunes, el orden en que deben especificarse las reglas es importante. Consideremos este ejemplo:
BLOCKQUOTE {
border-color: red;
border-left: double;
color: black;
}
En este ejemplo, el color del borde izquierdo será negro. Esto es debido a que 'border-left' establece anchura, estilo y color. Y como el valor del color no está especificado en la propiedad 'border-left', se tomará de la propiedad 'color'. El hecho de que la propiedad 'color' se establezca después de la propiedad 'border-left' no es relevante.
Obsérvese que si bien la propiedad 'border-width' acepta hasta cuatro valores de longitud, esta propiedad sólo acepta uno.
Valor: <longitud> | <porcentaje> | auto
Inicial: auto
Se aplica a: elementos en bloque y elementos reemplazados
Se hereda: no
Valores porcentuales: se refieren a la anchura del elemento padre
Esta propiedad puede aplicarse a elementos que contienen texto, pero es más útil para elementos reemplazados tales como imágenes. La anchura especificada debe ser respetada, escalando la imagen si es necesario. Cuando se escale, si la propiedad 'height' es 'auto', deben preservarse las proporciones de la imagen.
Ejemplo:
IMG.icono { width: 100px }
Si las dos propiedades 'width' y 'height' de un elemento reemplazado valen 'auto', estas propiedades serán establecidas a las dimensiones intrínsecas del elemento.
No se permiten valores negativos.
Véase en la sección 4 sobre el modelo de formato una descripción de la relación entre esta propiedad y el relleno y el margen.
Valor: <longitud> | auto
Inicial: auto
Se aplica a: elementos en bloque y elementos reemplazados
Se hereda: no
Valores porcentuales: N/A
Esta propiedad puede aplicarse elementos que contienen texto, pero es más útil para elementos reemplazados, tales como imágenes. La altura debe ser respetada, debiéndose escalar la imagen si es necesario. Al escalar, si el valor de la propiedad 'width' es auto, deben mantenerse las proporciones de la imagen.
Ejemplo:
IMG.icono { height: 100px }
Si las dos propiedades 'width' y 'height' de un elemento reemplazado valen 'auto', estas propiedades serán establecidas a las dimensiones intrínsecas del elemento.
Cuando se aplique a un elemento textual, la altura puede ser respetada, por ejemplo mediante una barra de scroll.
No se permiten valores negativos.
CSS1 básico: Los AAUU pueden no tener en cuenta la propiedad 'height' (es decir, tratarla como si valiera 'auto') si el elemento no es un elemento reemplazado.
Valor: left | right | none
Inicial: none
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Con el valor 'none', el elemento será mostrado donde aparezca en el texto. Con un valor 'left' el elemento será movido a la izquierda y el texto continuará por el lado derecho del elemento. Con un valor 'right' el elemento será movido a la derecha y el texto cambiará de línea por el lado izquierdo del elemento. Con un valor de 'left' o 'right' se considera al elemento como un elemento en bloque (es decir, no se tiene en cuenta la propiedad 'display'). Véase en la sección 4.1.4 una especificación completa.
IMG.icono {
float: left;
margin-left: 0;
}
Este ejemplo colocará todos los elementos 'IMG' con 'CLASS=icono' junto al lado izquierdo del elemento padre.
Esta propiedad se usa normalmente con imágenes en línea, pero también se aplica a elementos de texto.
Valor: none | left | right | both
Inicial: none
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta propiedad especifica si un elemento permite que haya elementos flotantes a sus lados. Más concretamente, el valor de esta propiedad enumera los lados en los que no acepta elementos flotantes. Con 'clear' igual a 'left' el elemento será movido hasta quedar por debajo del elemento flotante a la izquierda. Con 'clear' igual a 'none', se permiten elementos flotantes a ambos lados.
Ejemplo:
H1 { clear: left }