Ir directamente al contenido de esta página

outline y los bordes redondeados

La propiedad outline dibuja alrededor de un elemento una línea a modo de marco que puede emplearse como un segundo borde a efectos de estilo. Sin embargo, esta línea no sigue el contorno de dicho elemento si a éste se le asigna un radio de borde para redondear las esquinas. En esta entrada muestro un par de soluciones a este pequeño problema.

Al convertir imágenes en HTML+CSS me he encontrado muchas veces con el realce de un elemento que consiste en un doble borde a dos colores como el que muestro en la imagen siguiente:

Un elemento con doble borde

Simplemente con asignar las propiedades border y outline se logra este efecto… a menos que el elemento tenga las esquinas redondeadas. En esas circunstancias outline sigue dibujando la caja rectangular del elemento, y no aplica el radio asignado al borde del mismo, dando lugar a esto:

El borde está redondeado, pero el resultado de outline sigue siendo un recuadro con esquinas de 90º

Si se revisa la especificación de outline para ver si este comportamiento es conforme o no a la Recomendación, el texto indica que la línea dibujada no tiene porqué ser rectangular, pero se refiere al caso de un elemento en línea cuyo contenido se reparta por varios renglones al que se aplique esta propiedad. Con respecto a los bordes redondeados, cuya posibilidad no se contemplaba al desarrollar la especificación de CSS2.1, no hay aclaración expresa.

En este punto tenemos tres opciones:

Como la primera opción es antisemántica y me parece perezosa y poco profesional, voy a explicar las otras dos, cuyos resultados pueden comprobarse en este ejemplo.

Jugando con los bordes de los descendientes

La idea es asignar a todos los descendientes del elemento bordes laterales y al primero y al último bordes superior e inferior respectivamente. Además hay que sustituir los márgenes de los descendientes por rellenos, para que sus bordes sean contiguos:


#bordes {
  border: 1px solid #C0C0C0;
}

#bordes p {
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
  margin: 0;
  padding: 0 16px 1em;
}	

#bordes h2 {
  border: 1px solid #FFF;
  margin-bottom: 0;
}

#bordes h2+p {
  padding-top: 1em;
}

#bordes p:last-child {
  border-bottom: 1px solid #FFF;
  -webkit-border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}

Como se puede comprobar, logramos el efecto del doble borde, pero recargamos nuestra hoja de estilos.

Con CSS3: box-shadow

box-shadow es una propiedad de CSS3 que, como su nombre indica, nos permite definir la sombra que proyecta un elemento. Su sintaxis es:

  1. La palabra clave inset (opcional). Su presencia indica que la sombra debe extenderse por el interior del elemento; su ausencia hace que la sombra se extienda fuera.
  2. Cuatro distancias, las dos primeras obligatorias y las dos siguientes opcionales; indican, respectivamente, el desplazamiento horizontal de la sombra desde el punto (0,0) del elemento, el desplazamiento vertical, el radio de difuminación —para un efecto de filtro gausiano— y el ancho de la sombra.
  3. El color de la sombra (opcional).

Teniendo en cuenta esto, defino mi sombra de esta manera…


box-shadow: inset 0 0 0 1px #FFF;

…para que simule un borde interior —inset—, que se extienda sin desplazamiento alguno para que sea visible en todo el contorno del elemento —los primeros dos ceros—, que no presente ninguna difuminación —el tercer cero—, cuyo ancho sea de 1 píxel como el borde exterior —1px— y que sea de color blanco —#FFF—. Como en el caso de outline, el ancho de la sombra no se toma en cuenta a efectos de calcular márgenes ni rellenos. Y funciona, al menos para Explorer 9, Firefox 3.5+, Chrome 4+, Safari 3.1+ y Opera 10.5+.

Esta solución me parece más elegante y eficiente, y en ausencia de soporte su impacto es, a mi juicio, mínimo.

Esta entrada se publicó el 28 de octubre de 2011, se archivó en CSS, y fue etiquetada como . Autor: Saúl González Fernández. Aún no hay comentarios ›.

Comentarios

Aún no hay comentarios

¿Algún comentario?

* Los campos con un asterisco son necesarios

Últimos proyectos

© Digital Icon, S.L., 2007 – 2012