CSS e gli angoli arrotondati
Nel mondo del web design, uno degli effetti visivi più ricercati è la realizzazione di elementi con angoli arrotondati. In passato, ottenere questo risultato non era affatto semplice: spesso si ricorreva a soluzioni complesse che prevedevano l’uso di immagini realizzate su misura, posizionate manualmente negli angoli dei box per simulare la curvatura.
Con l’introduzione di CSS3 tutto è diventato molto più semplice. Grazie alla proprietà border-radius, infatti, è sufficiente una singola riga di codice per ottenere angoli perfettamente arrotondati.
La proprietà border-radius di CSS3
Per applicare angoli arrotondati a un box con CSS3, basta aggiungere la proprietà border-radius allo stile dell’elemento. Ad esempio:
div.box-con-angoli-arrotondati {
width: 300px;
height: 300px;
background-color: #FFFF00;
border: 3px solid #000000;
border-radius: 30px;
}In questo esempio, assegnando un solo valore alla proprietà border-radius, tutti e quattro gli angoli avranno la stessa curvatura (in questo caso un raggio di 30px, che produrrà angoli stondati simili a un quarto di cerchio).
È anche possibile personalizzare la curvatura di ciascun angolo utilizzando le seguenti proprietà specifiche:
border-top-left-radius– angolo superiore sinistroborder-top-right-radius– angolo superiore destroborder-bottom-right-radius– angolo inferiore destroborder-bottom-left-radius– angolo inferiore sinistro
In alternativa, puoi definire valori diversi per ogni angolo direttamente nella proprietà border-radius, specificando quattro valori separati:
border-radius: 20px 30px 40px 50px;I valori seguono l’ordine: angolo superiore sinistro (20px), angolo superiore destro (30px), angolo inferiore destro (40px), angolo inferiore sinistro (50px).
Come utilizzare il generatore di codice CSS3 per gli angoli arrotondati?
Il generatore presente in questa pagina ti consente di creare rapidamente il codice CSS per angoli arrotondati. Ti basta specificare il raggio (in pixel) desiderato per ciascun angolo, quindi copiare il codice CSS generato e incollarlo nel foglio di stile del tuo sito.
Puoi applicare il codice direttamente allo stile di uno specifico elemento, oppure creare una classe CSS da riutilizzare su più elementi. In entrambi i casi, otterrai un effetto visivo moderno e professionale in pochi istanti.
