Generatore di border radius CSS
Crea valori complessi di border-radius in CSS in modo visivo. Controllo indipendente di ciascun angolo.
border-radius: 20px 20px 20px 20px;
Come usare questo strumento
- 1
Drag the TL, TR, BR, and BL sliders to set each corner radius in pixels (0 to 100).
- 2
Watch the indigo preview box update live as you change each corner.
- 3
Read the generated border-radius declaration in the code box below the sliders.
- 4
Click Copy CSS to put the declaration on your clipboard, then paste it into your stylesheet.
Che cos'è il generatore di border radius CSS?
La proprietà border-radius di CSS accetta fino a quattro valori, uno per angolo, nell'ordine in alto a sinistra, in alto a destra, in basso a destra e in basso a sinistra. Combini raggi diversi per ottenere forme organiche tipo goccia, schede asimmetriche o stili a fumetto. Questo strumento le consente di regolare ciascun angolo con i cursori e di vedere il risultato in tempo reale.
Casi d'uso comuni
Rounding the corners of a card or panel component and copying the exact pixel value into a stylesheet.
Creating an asymmetric shape, like a chat bubble, by giving one corner a small radius and the others a larger one.
Prototyping a pill or capsule button by pushing all four sliders toward their maximum.
Matching a design spec that calls for different radii on the top corners versus the bottom corners.
Quickly testing how a corner radius looks at different pixel sizes before committing a value to a design system.
Teaching or demonstrating how the four-value border-radius shorthand maps to each corner.
Domande frequenti
E i raggi ellittici?▼
Strumenti correlati
Convertitore di colori (HEX/RGB/HSL)
Converte i colori tra i formati HEX, RGB e HSL. Scelga un colore visivamente o inserisca i valori manualmente.
Generatore di box shadow CSS
Crea valori di box-shadow in CSS in modo visivo. Anteprima in tempo reale e copia del CSS generato.
Generatore di gradienti CSS
Crea gradienti CSS lineari e radiali. Scelga i colori in modo visivo e copi il CSS generato.
Generatore di curve di accelerazione cubic-bezier
Crea curve di accelerazione cubic-bezier per il CSS. Include preset standard.
Generatore di palette di colori
Genera palette di colori armoniose a partire da qualsiasi colore di base. Supporta schemi complementari, analoghi, triadici e monocromatici.
Generatore di CSS clamp()
Genera valori CSS fluidi e responsivi con clamp(). Scala in modo uniforme tra dimensioni minime e massime lungo gli intervalli del viewport.