Corner Radius — o que é, raio de arredondamento em aplicativos móveis

O que é corner radius?

Corner radius é um valor numérico que determina o grau de arredondamento dos cantos de um elemento retangular. Quanto maior o valor, mais arredondado o canto se torna. Com valor 0, o canto permanece reto (90°); com valor igual à metade do lado menor, o elemento se transforma em um círculo (para um quadrado) ou em um retângulo arredondado com lados retos (cápsula).

No design mobile, corner radius é usado para: cartões e blocos, botões, campos de entrada, janelas modais, imagens e avatares, indicadores de progresso, chips e badges. Cada tipo de elemento possui uma faixa recomendada de arredondamento baseada nas diretrizes Material Design e Human Interface Guidelines.

De acordo com Material Design 3 (Google, 2026), o arredondamento de cantos é classificado em três níveis: pequeno (4 dp) para botões e campos de entrada, médio (8–12 dp) para cartões e folhas, grande (16–28 dp) para diálogos e bottom sheets. Apple HIG (2025) recomenda um corner radius uniforme de 10–12 pt para elementos do sistema (UIButton, UITextField) e 20+ pt para apresentações modais.

Corner radius no iOS: CALayer e SwiftUI

No iOS, o arredondamento de cantos é implementado através da propriedade cornerRadius de CALayer. No UIKit, cada UIView tem uma camada cujo cornerRadius pode ser definido. Para arredondamentos mais complexos (diferentes raios para diferentes cantos), são usados maskedCorners e CACornerMask em combinação com UIBezierPath.

// UIKit: arredondamento via CALayer
import UIKit

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

Em SwiftUI, o arredondamento é definido via modificador cornerRadius() ou via ClipShape com RoundedRectangle. SwiftUI também suporta arredondamento individual de cantos através de UIRectCorner em combinação com clipped() e overlay().

// SwiftUI: arredondamento via RoundedRectangle
import SwiftUI

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

// Arredondamento individual de cantos
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius é um estilo de arredondamento usado pela Apple no iOS desde o iOS 7. Diferente do raio clássico (circular), o raio contínuo cria um arredondamento mais suave usando uma curva Bezier de terceira ordem em vez de um arco circular. SwiftUI suporta este estilo através do parâmetro style: .continuous em RoundedRectangle. A Apple recomenda continuous corner radius para todos os elementos do sistema por ser visualmente mais natural.

Corner radius no Android: shape e Compose

No Android, o arredondamento de cantos é tradicionalmente implementado através de recursos XML shape na pasta res/drawable. Shape define a forma do fundo com os parâmetros cornerRadius e solid. Para cantos diferentes, usa-se <corners android:bottomLeftRadius="..." />. No Material Design 3, foi adicionado MaterialShapeDrawable com suporte a temas e formas dinâmicas.

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

Em Jetpack Compose, o arredondamento é definido através do parâmetro shape de Modifier. Compose fornece RoundedCornerShape com suporte a diferentes raios para cada canto e estilo (CircularShape ou CutCornerShape). Compose também suporta continuous corner radius através de RoundedCornerShape em combinação com traço gráfico.

// Jetpack Compose: arredondamento 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 com arredondamento personalizado")
}

MaterialShapeDrawable no sistema View do Android permite alterar dinamicamente o corner radius sem recriar o drawable. Use ShapeAppearanceModel para configuração precisa: defina cornerFamily (rounded ou cut) e cornerSize para cada canto individualmente.

Como escolher o corner radius ideal

Escolher o corner radius depende do tipo de elemento, contexto de uso e plataforma. Não existe regra universal, mas Material Design e Apple HIG fornecem recomendações claras para componentes padrão. O princípio principal: o arredondamento deve ser perceptível mas não interferir com o conteúdo.

Regra de contraste: elementos com corner radius diferentes na mesma interface devem diferir em pelo menos 4 dp para que a diferença visual seja perceptível. Não use 3 níveis de arredondamento em uma tela — isso cria ruído visual. Material Design 3 recomenda usar no máximo dois níveis de arredondamento por tela: um para contêineres (cartões, diálogos) e outro para elementos interativos (botões, campos).

Corner radius no Flutter

No Flutter, o arredondamento de cantos é implementado através da classe BorderRadius, que aceita valores Radius.circular() ou Radius.elliptical(). Flutter suporta arredondamento individual através de BorderRadius.only() e BorderRadius.horizontal()/vertical(). O widget ClipRRect recorta o elemento filho de acordo com o BorderRadius dado.

// Flutter: arredondamento via 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('Arredondamento personalizado de cantos'),
)

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

ClipRRect no Flutter é usado quando você precisa recortar uma imagem ou widget complexo ao longo de uma borda arredondada. Para contêineres de fundo simples, BoxDecoration com borderRadius é suficiente — isso é mais eficiente pois não cria uma camada de recorte separada. Material Flutter 3.22+ suporta continuous corner radius através de ContinuousRectangleBorder.