Corner Radius — qu'est-ce que le rayon d'arrondi dans les applications mobiles

Qu'est-ce que corner radius ?

Corner radius est une valeur numérique qui détermine le degré d'arrondi des coins d'un élément rectangulaire. Plus la valeur est élevée, plus le coin devient arrondi. À la valeur 0, le coin reste droit (90°) ; à une valeur égale à la moitié du côté le plus court, l'élément se transforme en cercle (pour un carré) ou en rectangle arrondi avec des côtés droits (capsule).

Dans le design mobile, corner radius est utilisé pour : les cartes et tuiles, les boutons, les champs de saisie, les fenêtres modales, les images et avatars, les indicateurs de progression, les chips et badges. Chaque type d'élément a une plage recommandée d'arrondi basée sur les directives Material Design et Human Interface Guidelines.

Selon Material Design 3 (Google, 2026), l'arrondi des coins est classé en trois niveaux : petit (4 dp) pour les boutons et champs de saisie, moyen (8–12 dp) pour les cartes et feuilles, grand (16–28 dp) pour les dialogues et bottom sheets. Apple HIG (2025) recommande un corner radius uniforme de 10–12 pt pour les éléments système (UIButton, UITextField) et 20+ pt pour les présentations modales.

Corner radius sur iOS : CALayer et SwiftUI

Sur iOS, l'arrondi des coins est implémenté via la propriété cornerRadius de CALayer. Dans UIKit, chaque UIView a une couche dont le cornerRadius peut être défini. Pour les arrondis plus complexes (différents rayons pour différents coins), on utilise maskedCorners et CACornerMask en combinaison avec UIBezierPath.

// UIKit : arrondi via CALayer
import UIKit

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

Dans SwiftUI, l'arrondi est défini via le modificateur cornerRadius() ou via ClipShape avec RoundedRectangle. SwiftUI prend également en charge l'arrondi individuel des coins via UIRectCorner en combinaison avec clipped() et overlay().

// SwiftUI : arrondi via RoundedRectangle
import SwiftUI

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

// Arrondi individuel des coins
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius est un style d'arrondi utilisé par Apple dans iOS depuis iOS 7. Contrairement au rayon classique (circulaire), le rayon continu crée un arrondi plus lisse en utilisant une courbe de Bézier du troisième ordre au lieu d'un arc de cercle. SwiftUI prend en charge ce style via le paramètre style: .continuous dans RoundedRectangle. Apple recommande continuous corner radius pour tous les éléments système car il est visuellement plus naturel.

Corner radius sur Android : shape et Compose

Sur Android, l'arrondi des coins est traditionnellement implémenté via des ressources XML shape dans le dossier res/drawable. Shape définit la forme du fond avec les paramètres cornerRadius et solid. Pour différents coins, on utilise <corners android:bottomLeftRadius="..." />. Dans Material Design 3, MaterialShapeDrawable a été ajouté avec la prise en charge des thèmes et des formes dynamiques.

<!-- 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>

Dans Jetpack Compose, l'arrondi est défini via le paramètre shape de Modifier. Compose fournit RoundedCornerShape avec la prise en charge de différents rayons pour chaque coin et style (CircularShape ou CutCornerShape). Compose prend également en charge continuous corner radius via RoundedCornerShape en combinaison avec un trait graphique.

// Jetpack Compose : arrondi via 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 avec arrondi personnalisé")
}

MaterialShapeDrawable dans le système View d'Android permet de modifier dynamiquement le corner radius sans recréer le drawable. Utilisez ShapeAppearanceModel pour une configuration précise : définissez cornerFamily (rounded ou cut) et cornerSize pour chaque coin individuellement.

Comment choisir le bon corner radius

Choisir le corner radius dépend du type d'élément, du contexte d'utilisation et de la plateforme. Il n'existe pas de règle universelle, mais Material Design et Apple HIG fournissent des recommandations claires pour les composants standard. Le principe principal : l'arrondi doit être visible mais ne pas interférer avec le contenu.

Règle de contraste : les éléments avec un corner radius différent dans la même interface doivent différer d'au moins 4 dp pour que la différence visuelle soit perceptible. N'utilisez pas 3 niveaux d'arrondi sur un écran — cela crée un bruit visuel. Material Design 3 recommande de ne pas utiliser plus de deux niveaux d'arrondi par écran : un pour les conteneurs (cartes, dialogues) et un pour les éléments interactifs (boutons, champs).

Corner radius dans Flutter

Dans Flutter, l'arrondi des coins est implémenté via la classe BorderRadius, qui accepte les valeurs Radius.circular() ou Radius.elliptical(). Flutter prend en charge l'arrondi individuel via BorderRadius.only() et BorderRadius.horizontal()/vertical(). Le widget ClipRRect découpe l'élément enfant selon le BorderRadius donné.

// Flutter : arrondi via ClipRRect et 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('Arrondi personnalisé des coins'),
)

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

ClipRRect dans Flutter est utilisé lorsque vous devez découper une image ou un widget complexe le long d'une bordure arrondie. Pour les conteneurs d'arrière-plan simples, BoxDecoration avec borderRadius suffit — cela est plus performant car cela ne crée pas de couche de découpage séparée. Material Flutter 3.22+ prend en charge continuous corner radius via ContinuousRectangleBorder.