Corner Radius — qué es, radio de redondeo en aplicaciones móviles

¿Qué es corner radius?

Corner radius es un valor numérico que determina el grado de redondeo de las esquinas de un elemento rectangular. Cuanto mayor es el valor, más redondeada se vuelve la esquina. Con un valor de 0, la esquina permanece recta (90°); con un valor igual a la mitad del lado menor, el elemento se convierte en un círculo (para un cuadrado) o en un rectángulo redondeado con lados rectos (cápsula).

En el diseño móvil, corner radius se utiliza para: tarjetas y mosaicos, botones, campos de entrada, ventanas modales, imágenes y avatares, indicadores de progreso, chips y etiquetas. Cada tipo de elemento tiene un rango recomendado de redondeo basado en las guías de Material Design y Human Interface Guidelines.

Según Material Design 3 (Google, 2026), el redondeo de esquinas se clasifica en tres niveles: pequeño (4 dp) para botones y campos de entrada, medio (8–12 dp) para tarjetas y hojas, grande (16–28 dp) para diálogos y bottom sheets. Apple HIG (2025) recomienda un corner radius uniforme de 10–12 pt para elementos del sistema (UIButton, UITextField) y 20+ pt para presentaciones modales.

Corner radius en iOS: CALayer y SwiftUI

En iOS, el redondeo de esquinas se implementa mediante la propiedad cornerRadius de CALayer. En UIKit, cada UIView tiene una capa a la que se le puede establecer cornerRadius. Para redondeos más complejos (diferentes radios para diferentes esquinas), se utilizan maskedCorners y CACornerMask en combinación con UIBezierPath.

// UIKit: redondeo mediante CALayer
import UIKit

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

En SwiftUI, el redondeo se define mediante el modificador cornerRadius() o mediante ClipShape con RoundedRectangle. SwiftUI también admite el redondeo individual de esquinas a través de UIRectCorner en combinación con clipped() y overlay().

// SwiftUI: redondeo mediante RoundedRectangle
import SwiftUI

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

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

Continuous corner radius es un estilo de redondeo utilizado por Apple en iOS desde iOS 7. A diferencia del radio clásico (circular), el radio continuo crea un redondeo más suave mediante el uso de una curva Bezier de tercer orden en lugar de un arco circular. SwiftUI admite este estilo a través del parámetro style: .continuous en RoundedRectangle. Apple recomienda continuous corner radius para todos los elementos del sistema por ser visualmente más natural.

Corner radius en Android: shape y Compose

En Android, el redondeo de esquinas se implementa tradicionalmente mediante recursos XML shape en la carpeta res/drawable. Shape define la forma del fondo con los parámetros cornerRadius y solid. Para diferentes esquinas, se utiliza <corners android:bottomLeftRadius="..." />. En Material Design 3, se ha añadido MaterialShapeDrawable con soporte para temas y 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>

En Jetpack Compose, el redondeo se define mediante el parámetro shape de Modifier. Compose proporciona RoundedCornerShape con soporte para diferentes radios para cada esquina y estilo (CircularShape o CutCornerShape). Compose también admite continuous corner radius a través de RoundedCornerShape en combinación con trazo gráfico.

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

MaterialShapeDrawable en el sistema View de Android permite cambiar dinámicamente el corner radius sin recrear el drawable. Use ShapeAppearanceModel para una configuración precisa: establezca cornerFamily (rounded o cut) y cornerSize para cada esquina individualmente.

Cómo elegir el corner radius adecuado

Elegir el corner radius depende del tipo de elemento, el contexto de uso y la plataforma. No existe una regla universal, pero Material Design y Apple HIG proporcionan recomendaciones claras para componentes estándar. El principio principal: el redondeo debe ser notable pero no interferir con el contenido.

Regla de contraste: los elementos con diferente corner radius en la misma interfaz deben diferir al menos en 4 dp para que la diferencia visual sea notable. No use 3 niveles de redondeo en una pantalla — esto crea ruido visual. Material Design 3 recomienda usar no más de dos niveles de redondeo por pantalla: uno para contenedores (tarjetas, diálogos) y otro para elementos interactivos (botones, campos).

Corner radius en Flutter

En Flutter, el redondeo de esquinas se implementa mediante la clase BorderRadius, que acepta valores Radius.circular() o Radius.elliptical(). Flutter admite redondeo individual a través de BorderRadius.only() y BorderRadius.horizontal()/vertical(). El widget ClipRRect recorta el elemento hijo según el BorderRadius dado.

// Flutter: redondeo mediante ClipRRect y 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('Redondeo personalizado de esquinas'),
)

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

ClipRRect en Flutter se usa cuando necesita recortar una imagen o widget complejo a lo largo de un borde redondeado. Para contenedores de fondo simples, BoxDecoration con borderRadius es suficiente — esto es más eficiente ya que no crea una capa de recorte separada. Material Flutter 3.22+ admite continuous corner radius a través de ContinuousRectangleBorder.