Bordes y
contornosBordes y
contornosCualquier elemento de una página web puede tener un borde (en inglés, border) o un contorno (en inglés, outline).
La propiedad compuesta border permite establecer simultáneamente los cuatro bordes (arriba, derecha, abajo e izquierda) de un elemento, definiendo su:
Las tres características del borde se pueden escribir en cualquier orden.
  |
p { border: red 3px solid; } | Esto es un párrafo con borde de estilo solid. |
Los estilos de bordes definidos en CSS2 son none, hidden, dotted, dashed, solid, double, groove, ridge, inset y outset.
| |
p { border: red 3px none; } |
Esto es un párrafo con borde de estilo none. |
| |
p { border: red 3px hidden; } |
|
| |
p { border: red 3px dotted; } |
Esto es un párrafo con borde de estilo dotted. |
| |
p { border: red 3px dashed; } |
Esto es un párrafo con borde de estilo dashed. |
| |
p { border: red 3px solid; } |
Esto es un párrafo con borde de estilo solid. |
| |
p { border: red 5px double; } |
Esto es un párrafo con borde de estilo double. |
| |
p { border: red 5px groove; } |
Esto es un párrafo con borde de estilo groove. |
| |
p { border: red 5px ridge; } |
Esto es un párrafo con borde de estilo ridge. |
| |
p { border: red 5px inset; } |
Esto es un párrafo con borde de estilo inset. |
| |
p { border: red 5px outset; } |
Esto es un párrafo con borde de estilo outset. |
Los estilos groove, ridge inset y outset producen un efecto tridimensional, pero el resultado depende de los colores escogidos en el fondo y en el borde:
| |
p { border: white 5px groove; } | Esto es un párrafo con borde de estilo groove. |
| |
p { border: white 5px ridge; } | Esto es un párrafo con borde de estilo ridge. |
| |
p { border: white 5px inset; } | Esto es un párrafo con borde de estilo inset. |
| |
p { border: white 5px outset; } | Esto es un párrafo con borde de estilo outset. |
Los estilos none y hidden producen el mismo resultado (no se muestra el borde), salvo en el caso de las tablas en modo colapsado, en el que hidden oculta el borde independientemente del borde de la casilla contigua y none sólo lo oculta si la casilla contigua tampoco tiene borde.
Las propiedades compuestas border-top, border-right, border-bottom y border-left permiten establecer de forma independiente los cuatro bordes (arriba, derecha, abajo e izquierda, respectivamente) de un elemento, definiendo su color, su grosor y su estilo. Se pueden escribir las tres características de cada borde en cualquier orden. Se puede definir uno, dos, tres o cuatro bordes.
| |
p { border-left: red 3px solid; } | Esto es un párrafo con borde izquierdo. |
|
| |
p { border-top: black 3px dashed; border-left: red 3px solid; } |
Esto es un párrafo con borde izquierdo y superior. |
|
| |
p { border-top: black 3px dashed; border-bottom: blue 5px dotted; border-left: red 3px solid; } |
Esto es un párrafo con borde izquierdo, superior e inferior. |
|
| |
p { border-top: black 3px dashed; border-right: green 5px double; border-bottom: blue 5px dotted; border-left: red 3px solid; } |
Esto es un párrafo con cuatro bordes distintos. |
Las propiedades border-color, border-width y border-style permiten establecer, respectivamente, el color, el grosor y el estilo de los cuatro bordes de un elemento. A cada una de las propiedades se le puedes dar uno, dos, tres o cuatro valores, que se interpretan de la siguiente manera:
En general, para que el navegador muestre un borde, se tienen que definir las tres propiedades (color, grosor y estilo), aunque normalmente los navegadores asignan el color negro como color prederminado, por lo que si no se establece el color del borde suele mostrarse de color negro
| |
p { border-color: red black; border-width: 5px 3px; border-style: dotted solid;} |
Esto es un párrafo con borde. |
| |
p { border-color: red; border-width: 2px 4px 6px 8px; border-style: dotted double dashed;} |
Esto es un párrafo con borde. |
| |
p { border-width: 5px; border-style: solid;} |
Esto es un párrafo con borde. |
Se puede establecer de forma independiente cada propiedad de cada borde mediante las propiedades:
En general, para que el navegador muestre un borde, se tienen que definir las tres propiedades (color, grosor y estilo), aunque normalmente los navegadores asignan el color negro como color prederminado, por lo que si no se establece el color del borde suele mostrarse de color negro
Firefox e Internet Explorer interpretan de manera distinta los bordes en las etiquetas html y body. Para ver las diferencias, se puede abrir la siguiente página de ejemplo en ambos navegadores y comparar el resultado.
Firefox muestra tanto el borde de html como el de body. Además si el contenido no cabe en la ventana y es necesario utilizar la barra de desplazamiento, los bordes inferiores no se ven hasta que te desplazas al final de la página.
Nota: En Mozilla 1.7 el borde de html se adaptaba al tamaño de la ventana, mientras que el borde de body se adaptaba al tamaño del contenido. En Firefox, ambos bordes se adaptan al contenido.
Internet Explorer muestra ambos bordes de la misma manera, así que si se definen ambos sólo muestra uno de los dos, concretamente el borde de body. Además, es un borde que va siempre pegado a la ventana, independientemente del contenido, hasta el punto que la barra de desplazamiento vertical aparece dentro del borde. Por si fuera poco, interpreta el margin como el padding y muestra un relleno igual a la suma del margen y del relleno.
Un contorno es como un segundo borde, pero que no se tiene en cuenta al calcular el tamaño del elemento y que no tiene por qué ser rectangular.
La propiedad compuesta outline permite establecer un contorno a un elemento, indicando como en caso del borde, el color, el grosor y el estilo del contorno. Internet Explorer no es capaz de representar esta propiedad.
 |
p { outline: red 3px solid; } | Esto es un párrafo con contorno de estilo solid. |
Un elemento puede tener simultáneamente borde y contorno, como muestra el ejemplo siguiente:
| |
p { outline: red 3px solid; border: black 3px solid; } |
Esto es un párrafo con borde y contorno de estilo solid. |
El contorno se diferencia del borde en que el contorno no se tiene en cuenta al calcular el tamaño del elemento, mientras que el borde sí, como muestran los ejemplos siguientes:
| |
p { border: black 10px solid; } | Esto es un párrafo normal y corriente. Esto es un párrafo con borde de estilo solid. Esto es un párrafo normal y corriente. |
| |
p { outline: black 10px solid; } | Esto es un párrafo normal y corriente. Esto es un párrafo con contorno de estilo solid. Esto es un párrafo normal y corriente. |
Esta diferencia es más evidente si el contorno se genera cuando el ratón pasa por encima del elemento. En el caso del borde, al añadirse el borde, los elementos siguientes se desplazan, pero en el caso del contorno, al generarse el contorno, los elementos siguientes no se desplazan.
| |
p:hover { border: black 10px solid; } | Esto es un párrafo normal y corriente. Cuando el ratón pasa por encima, se muestra un borde de estilo solid. Esto es un párrafo normal y corriente. |
| |
p:hover { outline: black 10px solid; } | Esto es un párrafo normal y corriente. Cuando el ratón pasa por encima, se muestra un contorno de estilo solid. Esto es un párrafo normal y corriente. |
El contorno se diferencia también del borde en que el borde es siempre rectangular, mientras que el contorno no tiene por qué serlo.
| |
span.con-border { border: black 3px solid; } | Esto es un párrafo normal y corriente. Esta frase tiene un borde de estilo solid y para ver la diferencia entre borde y contorno, debería ocupar varias líneas. Esta frase ya no tiene ni borde ni contorno. |
| |
span.con-outline { outline: black 3px solid; } | Esto es un párrafo normal y corriente. Esta frase tiene un contorno de estilo solid y para ver la diferencia entre borde y contorno, debería ocupar varias líneas. Esta frase ya no tiene ni borde ni contorno. |
Las propiedades outline-color, outline-width y outline-style permiten establecer, respectivamente, el color, el grosor y el estilo de los cuatro contornos de un elemento y se utilizan de la misma manera que las propiedades border-color, border-width y border-style.
La única diferencia es que outline-color admite el valor invert. Con este valor, el contorno toma el color opuesto al color de fondo del elemento.
| |
body { background-color: lightyellow; } p { outline: invert 3px solid; } |
Esto es un párrafo con contorno de estilo solid. |
| |
body { background-color: black; color:white; } p { outline: invert 3px solid; } |
Esto es un párrafo con contorno de estilo solid. |
| |
body { background-color: red; color:yellow; } p { outline: invert 3px solid; } |
Esto es un párrafo con contorno de estilo solid. |