Gränsgräns - CSS-tricks | CSS Almanack 2025

Den border-boundaryegendom i CSS set begränsningar för att gränserna för ett element som påverkar hur elementets gränser beter sig. Den definieras i CSS Round Display Level 1-specifikationen, som för närvarande är i Working Draft-status. Det betyder att saker kan förändras mellan nu och formell kandidatrekommendation.

.element ( border-boundary: display; /* sets the boundary to the screen display */ )

Det faktum att den här egenskapen lever i CSS Round Display-specifikationen berättar redan vad den är bra på: att skapa cirkulära gränssnitt. Ännu mer specifikt, border-boundaryfaller under avsnittet "Rita gränser runt skärmens gräns", vilket är ännu en ledtråd till vad det gör bra: låter ett elements gränser respektera den runda gränsen för cirkulära gränssnitt.

Föreställ dig, om du vill, en smart klocka med en rund skärm. Låt oss säga att skärmen är 150 pixlar kvadrat. Och i den finns en orange låda som har samma dimensioner.

Ingenting, galet, eller hur? Den orange rutan överensstämmer med den rundade skärmen eftersom den överflödar kanterna som är dolda. Men se vad som händer när en kant läggs till rutan ...

Hmm, inte så bra. Återigen överflödar kanterna på lådan den runda skärmen, så att vår kant klipps av i processen.

Det är där det border-boundarypassar in i bilden. Om du lägger till den i rutan med ett värde på displaykan rutan följa skärmens runda form. Eftersom fastighetens webbläsarstöd är exakt för tillfället, tillåt mig att erbjuda en hånad bild av det avsedda resultatet.

Se det? Gränsen respekterar skärmens runda form och förhindrar att den klipps av.

Du kan föreställa dig hur användbart det kan vara när det gäller att designa för klockor med gränssnitt. CSS-arbetsgruppen har sammanställt en lista över möjliga användningsfall som border-boundaryverkligen kan vara till nytta.

Syntax

border-boundary: none | parent | display;

Ursprungligt värde: none
Gäller för: alla element
Ärvt: ja
Procentandelar: ej tillämpligt
Beräknat värde: som specificerat
Animationstyp: diskret

Värden

none: ingen gräns är angiven vid gränsen.
parent: ställer in gränsen där elementets yta och gränsen för dess överordnade möts.
display: ställer in gränsen där elementets område och gränsen för visningsområdet möts.