Generi un valore border-radius CSS

Inserisca comuni lunghezze o percentuali CSS e riceverà sia il valore shorthand sia la proprietà border-radius completa. L’ordine rispetta la specifica CSS, così Lei può definire ogni angolo in modo coerente senza dover ricordare quale posizione lo controlla. I raggi negativi vengono rifiutati perché non sono validi nei fogli di stile.

Scelga da uno a quattro valori del raggio

Inizi dal numero di valori adatto alla forma desiderata. Un solo valore applica lo stesso raggio a tutti e quattro gli angoli, soluzione ideale per schede, pulsanti, campi e altri componenti simmetrici. Due valori si alternano sugli angoli opposti: il primo controlla l’angolo superiore sinistro e quello inferiore destro, mentre il secondo controlla l’angolo superiore destro e quello inferiore sinistro. Con tre valori, il primo riguarda l’angolo superiore sinistro, il secondo entrambi gli angoli superiore destro e inferiore sinistro, e il terzo quello inferiore destro. Quattro valori offrono un controllo indipendente in senso orario: superiore sinistro, superiore destro, inferiore destro e inferiore sinistro. Ogni elemento deve essere una lunghezza CSS o una percentuale non negativa, come 8px, 0.5rem, 12% oppure 0. Lo zero senza unità è accettato perché CSS lo consente, ma qualsiasi altro numero richiede un’unità di lunghezza riconosciuta o il simbolo di percentuale. Mantenere separati i valori rende evidente l’associazione tra posizione e angolo prima di comporre lo shorthand finale.

Legga e utilizzi il CSS generato

Il risultato comprende due campi pensati per flussi di lavoro differenti. Il campo border_radius contiene soltanto il valore abbreviato ed è comodo quando un’applicazione conosce già la proprietà CSS da impostare oppure quando una pipeline di design token richiede un valore pulito. Il campo css contiene la dichiarazione completa, incluso il nome della proprietà border-radius, i due punti e il punto e virgola, affinché Lei possa incollarla direttamente in una regola di stile. I valori vengono restituiti nello stesso ordine in cui sono stati forniti, separati da un solo spazio. Il generatore non riordina silenziosamente gli angoli, non converte le unità e non comprime i valori ripetuti: conservare la rappresentazione inserita rende prevedibile il risultato ed evita di modificare intenzionalmente la sintassi dei token. Per esempio, fornendo 8px e 16px si ottiene border-radius: 8px 16px;, mentre quattro valori producono una dichiarazione in senso orario. L’output è deterministico e non contiene misure dipendenti dal browser, quindi l’API e lo strumento eseguito localmente restituiscono esattamente le stesse stringhe.

Convalidi i raggi prima di pubblicare un componente

I raggi degli angoli CSS non possono essere negativi; per questo il generatore si interrompe con un errore di input quando un valore inizia con il segno meno. Rifiuta inoltre elementi vuoti, testo non supportato, numeri diversi da zero privi di unità, dichiarazioni con punteggiatura e array che non contengono da uno a quattro valori. Questa convalida è utile quando le scelte provengono da un modulo, un file di configurazione, un editor di temi o una build automatizzata di design token, dove un testo errato potrebbe altrimenti raggiungere inosservato un foglio di stile. Sono accettate comuni unità assolute, relative al carattere, relative alla viewport, fisiche e percentuali, tra cui px, em, rem, vw, vh, vmin, vmax, ch, cm, mm, in, pt e pc, oltre alle moderne varianti della viewport. Questa capacità genera lo shorthand standard a raggio singolo; non crea la sintassi ellittica separata da una barra. Se Le servono angoli ellittici, mantenga separati i raggi orizzontale e verticale nel Suo CSS. Usi la dichiarazione restituita come elemento convalidato e la verifichi sull’elemento reale, poiché le percentuali dipendono dalle sue dimensioni.