--- title: "Esquinas rectas, redondeadas o redondas en tu app GoodBarber" description: "En GoodBarber, las esquinas de tu app pueden ser rectas, redondeadas a 4 px o redondas, en celdas, botones y campos. Cualquier otro radio, en el JSON." canonical_url: "https://es.goodbarber.com/blog/que-forma-dar-a-mi-app-esquinas-rectas-redondeadas-o-redondas-a1192/" lang: es date: 2026-11-05 last_updated: 2026-11-06 --- # ¿Qué forma dar a mi app: esquinas rectas, redondeadas o redondas? En GoodBarber, la forma de las esquinas de tu app se elige entre tres opciones, y el radio exacto, si lo quieres, se ajusta en el JSON. Es la firma más visible de una app. Rectas, las esquinas dan un carácter nítido y decidido. Ligeramente redondeadas, lo suavizan. Redondas, hacen la app cálida y acogedora. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://es.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer [Elige **GoodBarber** como tuFuente de noticias preferidaElige **GoodBarber** como tu](https://www.google.com/preferences/source?q=es.goodbarber.com) 5 nov 2026 · Actualizado el 6 nov 2026 · 7 min de lectura ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98605385-68813750.jpg?v=1793872324.0484445) Esto es lo que cambia la forma en una app GoodBarber, dónde se ajusta y cómo llegar hasta el radio que elijas. ## Tres formas para toda la app: esquinas rectas, redondeadas, redondas ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98605385-68813751.jpg?v=1793872325.588453) La forma es el redondeo de las esquinas de tus celdas, tus miniaturas, tus botones y tus campos, lo que solemos llamar esquinas redondeadas. En el Design System de GoodBarber, es el [Shape atom](https://es.goodbarber.com/uxdesign/atom-shape/), y propone tres formas listas para usar. **Cuadrado**, la esquina es recta y el radio vale 0. **Redondeado**, el radio vale 4 píxeles, lo justo para suavizar sin llamar la atención. **Redondo**, vale 12 píxeles en una celda o una miniatura, y en un botón o un campo ocupa toda la altura, la forma que los diseñadores llaman pill. No ajustas estas esquinas elemento por elemento. Una forma elegida en **Mi App › Estilo de la app › Miniaturas y celdas** vale para todas las listas, todos los widgets de la Home y sus encabezados, en todas tus páginas. Es nuestro principio «Set once, consistent everywhere», un valor que se pone una vez y se repite en todas partes. Los botones y los campos tienen su propia opción, también en Estilo de la app, en **Botones** y **Campos de formulario**, con las mismas tres formas predefinidas. Así puedes tener celdas cuadradas y botones redondos. ## Los pequeños elementos siguen redondos ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98605385-68813752.jpg?v=1793872327.1964622) En una app GoodBarber con esquinas rectas, **no todo es cuadrado**. Las celdas, las miniaturas y los botones lo son. Pero **el avatar** de un autor sigue siendo un círculo, redondo por naturaleza. Y otros pequeños elementos tienen su propia forma, que no sigue la forma elegida para la app: **el icono de reproducción** de un vídeo, **la etiqueta de su duración**, **la pastilla de fecha**. Nuestras plantillas los entregan redondos. Un círculo se reconoce de un vistazo, incluso muy pequeño, y señala algo aparte, una persona, una acción, una referencia. **Aun así, su forma no es fija.** La pastilla de fecha tiene su propio cursor de forma, con tres posiciones. Así es como la app de Unit 7 de arriba, la de un taller de serigrafía, pasó sus pastillas a cuadrado, para llevar hasta el final su apuesta por las esquinas rectas. ## Ajusta la forma de tu app en GoodBarber [Animación: la forma Redondo elegida en Miniaturas y celdas, luego un radio de 20 ajustado en el JSON](https://player.vimeo.com/video/1243651729?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Todo pasa en **Mi App › Estilo de la app**. Tres paneles ofrecen allí la misma elección, Cuadrado, Redondeado o Redondo. **Miniaturas y celdas** ajusta las celdas, las miniaturas, los encabezados y los fondos de widget. **Botones** ajusta los botones, y **Campos de formulario** los campos. La elección se guarda al hacer clic, y la vista previa se actualiza. Con las plantillas Bold, Minimal y Clean TabBar, la barra de pestañas tiene su propio ajuste, «Estilo de los ángulos», en **Mi App › Estructura › Menú › Ajustes**. Para un radio que no está entre las tres opciones, la extensión gratuita **Edición avanzada** abre el JSON, la lista completa de los ajustes, la misma que para [la sombra](https://es.goodbarber.com/blog/como-ajustar-la-sombra-en-mi-app-a1160/) y [los bordes](https://es.goodbarber.com/blog/como-ajustar-los-bordes-en-mi-app-a1169/). Se instala desde el menú **«Extensiones Store»**, en la ficha «Edición avanzada», y tus pantallas de diseño ganan el botón { EDICIÓN }, arriba a la derecha. 1. **Abre el JSON de la app.** En **Mi App › Estilo de la app › Miniaturas y celdas**, haz clic en { EDICIÓN }. El editor se abre en los ajustes generales de la app, ordenados alfabéticamente. Despliega shape y encontrarás la clave **type**, con el valor que hayas elegido (sharp, rounded o round). 2. **Pasa a un radio libre.** Haz clic en el valor de type y sustitúyelo por **custom**. 3. **Da tu radio.** Bajo shape, haz clic en «+ Añadir», escribe **radius** en el campo newKey, deja «Valor» seleccionado, introduce un número entero en píxeles (20 aquí) y luego «Añadir». La clave aparece, marcada «Nuevo». Haz clic en «Guardar». Las celdas, las miniaturas, los encabezados y los fondos de widget toman ese radio. Los botones y los campos conservan la opción elegida en su panel, y los pequeños elementos redondos, su propia forma. Una pista. El radio es un número entero, y se lee a la escala de una página, no de una celda aislada. Compara en la vista previa antes de elegir. ## Antes, después: un radio de 20 cambia el carácter de una app ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98605385-68813754.jpg?v=1793872328.808471) Aquí tienes dos veces la misma pantalla, la de Eastside Music Workshop, una escuela de música. A la izquierda, todo es cuadrado, la opción Cuadrado para las miniaturas y celdas, la barra de pestañas con «Estilo de los ángulos» en Cuadrado, la pastilla de fecha en la primera posición de su cursor. La app es limpia, y algo severa para una escuela. A la derecha, han cambiado tres ajustes, el objeto shape en custom con un radio de 20, la barra de pestañas en «Todo redondeado» y la pastilla en la opción redonda. Nada más se ha movido, ni los colores, ni las fuentes, ni los espacios. Y sin embargo, la app cambia de carácter. Se vuelve acogedora, como una escuela a la que pequeños y mayores vienen a aprender música. Eso es todo lo que hace un radio, y por eso merece que lo elijas en lugar de aceptarlo sin más. ## Esquinas rectas, redondeadas o redondas, ¿qué efecto en tu app? ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98605385-68813755.jpg?v=1793872330.4524803) Tres apps, tres formas, y cada una cuenta otra cosa. De izquierda a derecha, la imagen muestra esquinas rectas para la app de un taller de serigrafía, redondeadas para la de una sociedad de historia natural, redondas para la de una escuela de música. La tabla añade el radio libre. | Forma | type | Radio | El efecto | | -------------- | ------- | ----------------------------------------- | ------------------------------------------------------------- | | 1. Cuadrado | sharp | 0 | Nítido, decidido, un aire de cartel | | 2. Redondeado | rounded | 4 px | Suavizado sin llamar la atención, la elección más discreta | | 3. Redondo | round | 12 px, toda la altura en botones y campos | Suave, acogedor, un aire de app de gran público | | 4. Radio libre | custom | el número que elijas | Tu firma, fuera de la escala, como los 20 del antes y después | Las tres primeras filas se eligen en Estilo de la app. La cuarta se ajusta en el editor, con dos claves. Ninguna forma es mejor que otra. Cada una de estas tres apps se sostiene gracias a la suya, porque dice lo mismo que sus [colores](https://es.goodbarber.com/blog/como-cambiar-los-colores-de-mi-app-a1179/) y sus fuentes. ## Un radio de 20 y botones redondos, para una app cálida ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98605385-68813756.jpg?v=1793872331.8684883) Mi ajuste favorito es el de Eastside, un radio de 20 en las celdas, botones redondos y una barra de pestañas redonda. Viene del logo de la escuela, tres arcos redondeados, y esa curva vuelve en cada celda y cada botón. Con curvas tan generosas, cada celda se convierte en un objeto bien distinto sobre el fondo, y los botones redondos se ven al primer vistazo. El radio de 20 se pone en el JSON, con los tres pasos de «Ajusta la forma de tu app en GoodBarber». Los botones y los campos pasan a la opción Redondo, y la barra de pestañas a «Todo redondeado». **La forma en resumen** - En una app GoodBarber, la forma de las esquinas se elige entre tres opciones, **Cuadrado** (0), **Redondeado** (4 px) y **Redondo** (12 px, o toda la altura en botones y campos). - Una forma elegida en **Estilo de la app › Miniaturas y celdas** vale para todas las celdas, miniaturas, encabezados y fondos de widget. Los botones y los campos tienen la misma elección, en su propio panel. - La barra de pestañas tiene su propio ajuste, **«Estilo de los ángulos»**, con las plantillas Bold, Minimal y Clean TabBar. - Algunos pequeños elementos **no siguen la forma de la app**. El avatar es redondo por naturaleza, el icono de reproducción, la duración y la pastilla de fecha tienen su propia forma, redonda en nuestras plantillas. - Para un radio preciso, pasa por el JSON con la extensión gratuita **Edición avanzada**, poniendo type en custom y añadiendo radius, un número entero. ## Te toca Abre **Mi App › Estilo de la app › Miniaturas y celdas** y prueba las tres opciones, la vista previa te sigue. Cuando te apetezca un radio propio, la extensión gratuita Edición avanzada añade el botón { EDICIÓN } en la misma pantalla, y bastan dos claves. ¿Todavía no tienes app? [Crea la tuya](https://es.goodbarber.com/create/) con GoodBarber, el Mobile App Builder. Sigue a GoodBarber en Google [![Añadir como fuente preferida en Google](https://portal.ww-cdn.com/portal_static/images/preferred-source/badge-es.ecc58798e9f7.png)](https://www.google.com/preferences/source?q=es.goodbarber.com) ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Sobre el autor Marie-Pierre Jeffard UI Designer Soy UI Designer en GoodBarber. Design system de las apps, componentes, layouts, sitio web, ilustraciones, animaciones: todo lo que hago gira en torno a la interfaz. Lo que me gusta de nuestro producto es inventar reglas universales, que funcionan en todas las pantallas y acogen todas las identidades visuales. La app se convierte en el escaparate de tu contenido. Me gusta lo que parece sencillo, y todo el trabajo invisible que hace falta para lograrlo: las reglas, las decisiones y las restricciones que hacen que una interfaz se sostenga. Eso es lo que cuento aquí. [Más de Marie-Pierre](https://es.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)