Corner Radius — che cos'è il raggio di arrotondamento nelle applicazioni mobili

Cos'è il corner radius?

Corner radius è un valore numerico che determina il grado di arrotondamento degli angoli di un elemento rettangolare. Più alto è il valore, più arrotondato diventa l'angolo. Con valore 0, l'angolo rimane retto (90°); con un valore pari alla metà del lato più corto, l'elemento si trasforma in un cerchio (per un quadrato) o in un rettangolo arrotondato con lati dritti (capsula).

Nel design mobile, il corner radius viene utilizzato per: carte e tessere, pulsanti, campi di input, finestre modali, immagini e avatar, indicatori di progresso, chip e badge. Ogni tipo di elemento ha un intervallo raccomandato di arrotondamento basato sulle linee guida Material Design e Human Interface Guidelines.

Secondo Material Design 3 (Google, 2026), l'arrotondamento degli angoli è classificato in tre livelli: piccolo (4 dp) per pulsanti e campi di input, medio (8–12 dp) per carte e fogli, grande (16–28 dp) per dialoghi e bottom sheet. Apple HIG (2025) raccomanda un corner radius uniforme di 10–12 pt per gli elementi di sistema (UIButton, UITextField) e 20+ pt per le presentazioni modali.

Corner radius su iOS: CALayer e SwiftUI

Su iOS, l'arrotondamento degli angoli è implementato tramite la proprietà cornerRadius di CALayer. In UIKit, ogni UIView ha un layer il cui cornerRadius può essere impostato. Per arrotondamenti più complessi (raggi diversi per angoli diversi), si utilizzano maskedCorners e CACornerMask in combinazione con UIBezierPath.

// UIKit: arrotondamento tramite CALayer
import UIKit

let cardView = UIView()
cardView.backgroundColor = .systemBackground
cardView.layer.cornerRadius = 12
cardView.layer.maskedCorners = [
    .layerMinXMinYCorner,
    .layerMaxXMinYCorner
]

In SwiftUI, l'arrotondamento si imposta tramite il modificatore cornerRadius() o tramite ClipShape con RoundedRectangle. SwiftUI supporta anche l'arrotondamento individuale degli angoli tramite UIRectCorner in combinazione con clipped() e overlay().

// SwiftUI: arrotondamento tramite RoundedRectangle
import SwiftUI

VStack {
    Text("Corner Radius 16")
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blue)
        )
}

// Arrotondamento individuale degli angoli
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius è uno stile di arrotondamento utilizzato da Apple in iOS da iOS 7. A differenza del raggio classico (circolare), il raggio continuo crea un arrotondamento più morbido utilizzando una curva di Bezier del terzo ordine invece di un arco circolare. SwiftUI supporta questo stile tramite il parametro style: .continuous in RoundedRectangle. Apple raccomanda continuous corner radius per tutti gli elementi di sistema perché visivamente più naturale.

Corner radius su Android: shape e Compose

Su Android, l'arrotondamento degli angoli è tradizionalmente implementato tramite risorse XML shape nella cartella res/drawable. Shape definisce la forma dello sfondo con i parametri cornerRadius e solid. Per angoli diversi, si usa <corners android:bottomLeftRadius="..." />. In Material Design 3, è stato aggiunto MaterialShapeDrawable con supporto per temi e forme dinamiche.

<!-- res/drawable/bg_card.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <corners android:radius="12dp" />
</shape>

In Jetpack Compose, l'arrotondamento si imposta tramite il parametro shape di Modifier. Compose fornisce RoundedCornerShape con supporto per diversi raggi per ogni angolo e stile (CircularShape o CutCornerShape). Compose supporta anche continuous corner radius tramite RoundedCornerShape in combinazione con tratto grafico.

// Jetpack Compose: arrotondamento tramite RoundedCornerShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Card(
    shape = RoundedCornerShape(
        topStart = 16.dp,
        topEnd = 16.dp,
        bottomStart = 4.dp,
        bottomEnd = 4.dp
    ),
    elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
) {
    Text(text = "Card con arrotondamento personalizzato")
}

MaterialShapeDrawable nel sistema View di Android consente di modificare dinamicamente il corner radius senza ricreare il drawable. Utilizzare ShapeAppearanceModel per una configurazione precisa: impostare cornerFamily (rounded o cut) e cornerSize per ogni angolo individualmente.

Come scegliere il corner radius giusto

Scegliere il corner radius dipende dal tipo di elemento, dal contesto d'uso e dalla piattaforma. Non esiste una regola universale, ma Material Design e Apple HIG forniscono raccomandazioni chiare per i componenti standard. Il principio principale: l'arrotondamento dovrebbe essere evidente ma non interferire con il contenuto.

Regola di contrasto: elementi con corner radius diversi nella stessa interfaccia dovrebbero differire di almeno 4 dp affinché la differenza visiva sia percepibile. Non utilizzare 3 livelli di arrotondamento su uno schermo — ciò crea rumore visivo. Material Design 3 raccomanda di non utilizzare più di due livelli di arrotondamento per schermo: uno per i contenitori (carte, dialoghi) e uno per gli elementi interattivi (pulsanti, campi).

Corner radius in Flutter

In Flutter, l'arrotondamento degli angoli è implementato tramite la classe BorderRadius, che accetta valori Radius.circular() o Radius.elliptical(). Flutter supporta l'arrotondamento individuale tramite BorderRadius.only() e BorderRadius.horizontal()/vertical(). Il widget ClipRRect ritaglia l'elemento figlio secondo il BorderRadius specificato.

// Flutter: arrotondamento tramite ClipRRect e Container
import 'package:flutter/material.dart';

Container(
    decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16.0),
            topRight: Radius.circular(16.0),
            bottomLeft: Radius.circular(4.0),
            bottomRight: Radius.circular(4.0),
        ),
    ),
    child: Text('Arrotondamento personalizzato degli angoli'),
)

// ClipRRect con Image
ClipRRect(
    borderRadius: BorderRadius.circular(12.0),
    child: Image.network(
        'https://example.com/image.jpg',
        fit: BoxFit.cover,
    ),
)

ClipRRect in Flutter viene utilizzato quando è necessario ritagliare un'immagine o un widget complesso lungo un bordo arrotondato. Per contenitori di sfondo semplici, BoxDecoration con borderRadius è sufficiente — questo è più performante poiché non crea un livello di ritaglio separato. Material Flutter 3.22+ supporta continuous corner radius tramite ContinuousRectangleBorder.