Cosa fa questo strumento
Questo strumento ti consente di modellare gli angoli arrotondati a occhio e ti fornisce il valore CSS border-radius corrispondente. Trascini un cursore per ciascuno dei quattro angoli e una casella di anteprima dal vivo si aggiorna in tempo reale, cosi puoi vedere esattamente come appare la forma prima di confermare. Aiuta gli sviluppatori front-end che vogliono un valore preciso senza tentativi ed errori, i designer che costruiscono lo stile di un componente e chiunque stia imparando come border-radius controlla le curve degli angoli.
Poiche ogni angolo ha il proprio cursore, non sei limitato a un arrotondamento uniforme. Puoi arrotondare solo la parte superiore, creare una forma a pillola o curvare un singolo angolo per una scheda o una card.
Come usarlo
- Trascina il cursore in alto a sinistra per impostare la curva dell’angolo in alto a sinistra.
- Trascina il cursore in alto a destra per l’angolo in alto a destra.
- Trascina il cursore in basso a destra per l’angolo in basso a destra.
- Trascina il cursore in basso a sinistra per l’angolo in basso a sinistra.
- Osserva l’aggiornamento dell’anteprima a ogni modifica finche la forma non sembra giusta.
- Copia la regola CSS border-radius generata e incollala nel tuo foglio di stile.
Un esempio veloce
Per creare una card con la parte superiore arrotondata e la base piatta, alza i cursori in alto a sinistra e in alto a destra allo stesso valore e mantieni quelli in basso a sinistra e in basso a destra a zero. L’anteprima mostra una forma simile a una scheda e la regola copiata si legge piu o meno come border-radius: 16px 16px 0 0;. Un errore comune e dimenticare che i valori procedono in senso orario dall’angolo in alto a sinistra, quindi controlla l’anteprima se un angolo si curva dove non te lo aspettavi.
Funziona interamente nel tuo browser, mantiene privato il tuo lavoro, e completamente gratuito e non richiede registrazione.
Domande frequenti
- Come arrotondo solo gli angoli superiori?
- Imposta i cursori in alto a sinistra e in alto a destra sul raggio desiderato e lascia i due in basso a zero. L'anteprima si aggiorna mentre trascini e il CSS copiato mantiene gli angoli inferiori squadrati.
- Quale CSS mi fornisce lo strumento?
- Produce una regola border-radius pronta all'uso con i quattro valori d'angolo in ordine: in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra. Incollala direttamente nel tuo foglio di stile.
- Le mie impostazioni vengono caricate da qualche parte?
- No. L'anteprima e il CSS sono generati interamente nel tuo browser, quindi nulla viene inviato a un server. Nessun caricamento e nessuna registrazione.