La border-boundarypropiedad en CSS establece restricciones a los límites de un elemento que afectan cómo se comportan los bordes del elemento. Está definido en la especificación CSS Round Display Level 1, que actualmente se encuentra en estado de borrador de trabajo. Eso significa que las cosas pueden cambiar entre ahora y la recomendación formal del candidato.
.element ( border-boundary: display; /* sets the boundary to the screen display */ )El hecho de que esta propiedad viva en la especificación CSS Round Display ya le dice en qué es bueno: crear interfaces circulares. Incluso más específicamente, se border-boundaryincluye en la sección "Dibujar bordes alrededor del borde de la pantalla", que es otra pista más de lo que hace bien: permitir que los bordes de un elemento respeten el límite redondo de las interfaces circulares.
Imagine, si lo desea, un reloj inteligente con pantalla redonda. Digamos que la pantalla tiene 150 píxeles cuadrados. Y en él hay una caja naranja que tiene las mismas dimensiones.
Nada, loco, ¿verdad? La caja naranja se adapta a la pantalla redondeada porque desborda los bordes, que están ocultos. Pero mire lo que sucede cuando se agrega un borde al cuadro ...
Hmm, no tan bien. Nuevamente, los bordes del cuadro desbordan la pantalla redonda, por lo que nuestro borde se recorta en el proceso.
Ahí es donde border-boundaryencaja en la imagen. Agregarlo al cuadro con un valor de displaypermite que el borde del cuadro siga la forma redonda de la pantalla. Dado que el soporte del navegador de la propiedad es exactamente nulo en este momento, permítame ofrecer una imagen simulada del resultado deseado.
Puede imaginar lo útil que podría ser esto cuando se trata de diseñar relojes con interfaces. El Grupo de Trabajo de CSS ha compilado una lista de posibles casos de uso en los border-boundaryque realmente podría resultar útil.
Sintaxis
border-boundary: none | parent | display;- Valor inicial:
none - Se aplica a: todos los elementos
- Heredado: si
- Porcentajes: n / a
- Valor calculado: como se especifica
- Tipo de animación: discreto
Valores
none: no se establece ningún límite en el borde.parent: establece el límite donde se encuentran el área del elemento y los bordes del borde de su padre.display: establece el límite donde se encuentran el área del elemento y los bordes del borde de la ventana gráfica.
Soporte de navegador
Ninguno en el momento de escribir este artículo.
Otras lecturas
- Especificación CSS Round Display Nivel 1 (Borrador de trabajo)
- Ejemplos de pantallas redondas (CSS Working Group Wiki)
- Especificaciones de la pantalla redonda CSS (01.org)