A border-boundarypropriedade em CSS define restrições para os limites de um elemento que afetam como as bordas do elemento se comportam. É definido na especificação CSS Round Display Nível 1, que atualmente está no status Working Draft. Isso significa que as coisas podem mudar entre agora e a recomendação formal do candidato.
.element ( border-boundary: display; /* sets the boundary to the screen display */ )O fato de esta propriedade residir na especificação CSS Round Display já diz a você no que ela é boa: criar interfaces circulares. Ainda mais especificamente, border-boundarycai na seção “Desenhar bordas ao redor da borda da tela”, que é mais uma dica do que ele faz bem: permitir que as bordas de um elemento respeitem o limite redondo de interfaces circulares.
Imagine, se quiser, um relógio inteligente com tela redonda. Digamos que a tela tenha um quadrado de 150 px. E nela está uma caixa laranja com as mesmas dimensões.
Nada, maluco né? A caixa laranja está de acordo com a tela arredondada porque está transbordando das bordas, que estão ocultas. Mas veja o que acontece quando uma borda é adicionada à caixa ...
Hmm, não tão bom. Novamente, as bordas da caixa transbordam da tela redonda, então nossa borda é cortada no processo.
É aí que border-boundaryse encaixa na imagem. Adicioná-lo à caixa com um valor de displaypermite que a borda da caixa siga a forma redonda da tela. Uma vez que o suporte do navegador da propriedade é exatamente zero no momento, permita-me oferecer um visual simulado do resultado pretendido.
Você pode imaginar como isso pode ser útil quando se trata de projetar relógios com interfaces. O CSS Working Group compilou uma lista de possíveis casos de uso onde border-boundarypodem realmente ser úteis.
Sintaxe
border-boundary: none | parent | display;- Valor inicial:
none - Aplica-se a: todos os elementos
- Herdado: sim
- Porcentagens: n / a
- Valor calculado: conforme especificado
- Tipo de animação: discreto
Valores
none: nenhum limite é definido na fronteira.parent: define o limite onde a área do elemento e as bordas da borda de seu pai se encontram.display: define o limite onde a área do elemento e as bordas da janela de visualização se encontram.
Suporte de navegador
Nenhum no momento da escrita.
Leitura adicional
- Especificação CSS Round Display Nível 1 (Working Draft)
- Exemplos de exibição redonda (Wiki do Grupo de Trabalho CSS)
- Especificações do CSS Round Display (01.org)