Generatore border-radius CSS
Crea la proprietà CSS border-radius personalizzata per angoli arrotondati, definendo raggio e unità per ogni angolo.
Esegui lo strumento
Questo strumento online genera la dichiarazione CSS `border-radius` per definire la curvatura degli angoli nei componenti dell'interfaccia web. Puoi impostare un raggio distinto per ciascuno dei quattro angoli: superiore sinistro, superiore destro, inferiore destro e inferiore sinistro. Se ometti un raggio numerico, il generatore assegna automaticamente il valore predefinito pari a 10. Hai la possibilità di indicare l'unità di misura desiderata, ad esempio pixel (`px`), percentuali (`%`) oppure unità relative (`rem` o `em`). In assenza di modifiche, il campo dell'unità adotta `px` come impostazione di base.
L'applicazione assembla la riga di codice formattando i quattro valori numerici nell'ordine orario standard richiesto dalle specifiche CSS. Questa struttura facilita la configurazione rapida di arrotondamenti simmetrici, forme asimmetriche per pulsanti moderni oppure card con angoli selettivamente azzerati. Quando ottieni la stringa finale nel riquadro, puoi integrarla direttamente all'interno delle tue classi CSS o nei fogli di stile del progetto frontend.
Istruzioni
- Inserisci il valore numerico per l'angolo superiore sinistro.
- Indica il valore numerico per l'angolo superiore destro.
- Imposta il raggio numerico per l'angolo inferiore destro.
- Inserisci il raggio numerico per l'angolo inferiore sinistro.
- Specifica l'unità di misura desiderata oppure lascia l'impostazione predefinita px.
- Avvia l'elaborazione per visualizzare la regola CSS formattata nel riquadro.
Esempi
- Con superiore sinistro = 15, superiore destro = 15, inferiore destro = 0, inferiore sinistro = 0 e unità = px, il pannello mostra border-radius: 15px 15px 0px 0px;.
- Lasciando vuoti tutti i campi, il generatore applica i valori predefiniti e restituisce border-radius: 10px 10px 10px 10px;.
- Impostando tutti i quattro angoli su 50 con unità %, l'output risultante è border-radius: 50% 50% 50% 50%;.
FAQ
In quale ordine compaiono gli angoli nella dichiarazione CSS?
La dichiarazione segue l'ordine in senso orario standard del CSS: angolo superiore sinistro, angolo superiore destro, angolo inferiore destro e angolo inferiore sinistro.
Cosa succede se un campo dell'angolo rimane vuoto?
Quando ometti un valore, il generatore inserisce automaticamente il valore predefinito pari a 10 per quell'angolo.
È possibile usare unità diverse dai pixel?
Sì, puoi inserire qualunque stringa nel campo dell'unità, come %, rem o em. Se lasci il campo vuoto, il generatore applica px.