Radio de Borde, Bordes y Contornos: Qué Sobrevive una Importación

Tres propiedades de CSS definen el borde de una caja: border-radius, border y outline. En el inspector de un navegador aparecen una junto a la otra, casi tocándose. Tras una importación a Figma, dejan de comportarse como una misma familia. Una sobrevive esquina por esquina, pero pierde una curva que Figma sabe dibujar y CSS no. Las otras dos se dividen siguiendo una línea que CSS ya había trazado, entre lo que cuenta como borde y lo que cuenta como contorno, y esa línea decide si un trazo empuja tu diseño o simplemente se queda ahí como pintura.

Si estás reconstruyendo una página sin archivo de origen, saber cuál de estas tres propiedades sobrevive, y en qué forma, te ahorra un repaso manual adivinando qué esquinas estaban redondeadas y qué trazo era puramente decorativo. UnHTML lee el CSS propio de una página para construir estas formas en lugar de adivinar a partir de una captura de pantalla, y se ejecuta por completo en tu máquina sin subir el contenido de la página. Por eso el mapeo de abajo describe exactamente qué esperar: qué conserva y qué pierde border-radius en el camino hacia Figma, cómo se dividen border y outline en dos tipos distintos de trazo, y qué revisar primero cuando una importación llega a tu archivo.

border-radius: las cuatro esquinas y la sintaxis de barra

border-radius de CSS es una propiedad abreviada de cuatro propiedades largas: border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius. Acepta de uno a cuatro valores, aplicados en ese orden. Un valor fija las cuatro esquinas. Dos valores fijan el par superior-izquierda/inferior-derecha y luego el par superior-derecha/inferior-izquierda. Tres valores fijan superior-izquierda, luego el par superior-derecha/inferior-izquierda, luego inferior-derecha. Cuatro valores fijan cada esquina por separado, empezando en superior-izquierda y avanzando en sentido horario. MDN documenta la misma expansión de cuatro esquinas que cualquier panel de estilos calculados de un navegador te mostraría.

border-radius también admite una sintaxis de barra para esquinas elípticas: los valores antes de la barra fijan los radios horizontales, los valores después fijan los radios verticales. border-radius: 10px / 20px dibuja cada esquina como una elipse de 10px de ancho por 20px de alto en lugar de un círculo de 10px. Los valores en porcentaje se resuelven contra el ancho propio de la caja en el eje horizontal y su alto propio en el eje vertical, por lo que un elemento alto y angosto y uno bajo y ancho pueden usar el mismo porcentaje y terminar con curvas visiblemente distintas.

Cuando UnHTML importa una página, el valor de radio calculado de cada esquina se mapea directamente a los campos de radio de esquina independiente de Figma, medidos en los píxeles de densidad independiente que usa Figma internamente. Si el CSS de origen fijó cuatro valores de esquina distintos, los cuatro se trasladan de forma individual, sin promediar ni elegir uno solo. La propia documentación de Figma sobre radio de esquina describe el mismo panel de esquinas independientes, al que se llega activando "Independent corners" en la barra lateral derecha.

Lo que no sobrevive es el suavizado de esquina. Figma llama a este efecto "squircle": una curva continua entre un cuadrado y un círculo, popularizada por el diseño de iOS, con su propio control deslizante en el panel de radio de esquina y un botón de ajuste rápido para iOS que fija el suavizado al 60%. CSS no tiene ninguna propiedad que exprese esta curva. border-radius solo describe un arco circular o elíptico, así que toda importación llega con 0% de suavizado, un arco simple, aunque la página en vivo se haya renderizado con algo que se le aproxime. ¿Quieres el aspecto squircle? Añádelo a mano después de importar. El CSS nunca lo tuvo para dártelo.

Border contra outline, y por qué solo uno sobrevive como forma

CSS mantiene border y outline conceptualmente separados, y esa separación importa más después de una importación que en la página en vivo. border es parte del modelo de caja: tiene un ancho, se ubica dentro del borde exterior del elemento, y cambiarlo cambia cuánto espacio ocupan el elemento y sus vecinos. outline se ubica fuera del border y, como lo plantea MDN con claridad, "los contornos no ocupan espacio, así que no afectan el diseño del documento de ninguna manera." outline-offset puede alejar aún más el outline, y ese espacio también es invisible para el diseño: nada más en la página se desplaza para hacerle lugar.

El auto layout actual de Figma se construyó para reflejar esta división. La propia guía de Figma sobre auto layout y CSS Flexbox plantea el mapeo directamente: un trazo interior se comporta como un border y se incluye en el diseño por defecto, mientras que un trazo central o exterior se comporta como un outline y se excluye del diseño, incluso cuando el ajuste "stroke included in layout" de un frame está activado. Es una decisión deliberada, no un descuido. Figma quiere que un trazo interior pueda empujar el tamaño mínimo de un frame tal como lo haría un border de CSS, y quiere que un trazo central o exterior se ubique sobre el diseño sin que eso le esté permitido nunca.

Fuera de un frame de auto layout, la distinción se estrecha de nuevo. La documentación de Figma sobre propiedades de trazo afirma que "el peso de un trazo no se incluye en las dimensiones generales de la capa" por defecto, sin importar si el trazo está alineado adentro, al centro o afuera. El cuadro delimitador que se muestra en la barra lateral conserva el mismo tamaño en cualquier caso. Solo dentro de un frame de auto layout, y solo si activas explícitamente "include stroke in layout," el peso del trazo empieza a contar en las dimensiones de una capa.

En la práctica: un border de CSS en un elemento importado se convierte en un trazo interior que se comporta como el border original dentro de auto layout. Un outline de CSS se convierte en un trazo central o exterior que se pinta correctamente pero nunca empuja a un elemento hermano como lo haría un border real. La forma queda bien en ambos casos. El comportamiento de diseño solo queda bien si sabías de qué propiedad de CSS venía.

Qué conserva la importación, y qué aplana

Puestas una junto a otra, las tres propiedades se dividen en conservar, convertir y aplanar:

• border-radius: se conserva exactamente, esquina por esquina, incluyendo radios elípticos con sintaxis de barra. Se convierte uno a uno en los campos de radio de esquina independiente de Figma.
• Suavizado de esquina: no se conserva, porque CSS no tiene nada que trasladar. Toda importación arranca en 0% de suavizado y necesita el control squircle aplicado a mano si se quiere ese aspecto.
• border: se conserva como un trazo interior, incluido en el diseño igual que el border de origen.
• outline: se conserva como un trazo central o exterior, visible como pintura pero excluido del diseño, lo cual coincide con el hecho de que un outline de CSS nunca afectó el diseño tampoco.

Algo que vale la pena revisar a mano no es algo que la importación haga mal, es algo que la página de origen ya decidió. Si una página fijó outline: none u outline: 0 en un elemento interactivo, esa eliminación sobrevive en el archivo de Figma exactamente como fue escrita, porque la importación se mantiene fiel al CSS tal como fue redactado. El criterio de éxito 2.4.7 de WCAG 2.1, Focus Visible, exige un indicador de foco visible en cualquier elemento interactivo. Una página que ya desactivó su outline de foco por defecto traslada ese vacío directamente a tu rediseño. Eso es una decisión de diseño para revisar, no un error para reportar.

Un dato con fecha que vale la pena recordar: outline es Baseline, ampliamente disponible, desde marzo de 2023, y border-radius es Baseline, ampliamente disponible, desde julio de 2015. Cualquier sitio razonablemente actual que importes tendrá ambas propiedades activas en algún lugar de la página. Por eso el mapeo entre CSS y los trazos de Figma importa en casi toda importación, no solo en un caso excepcional.

Preguntas Frecuentes

Consulta el bloque de preguntas frecuentes que acompaña este artículo para respuestas sobre la fidelidad exacta del radio, por qué un outline se convierte en una forma separada, y si un outline de foco faltante se traslada o no.

border-radius sobrevive una importación esquina por esquina, incluyendo radios elípticos, pero pierde la curva de suavizado de esquina de Figma, porque CSS no tiene ninguna propiedad que la describa. border y outline también sobreviven, solo que como dos alineaciones de trazo distintas con dos comportamientos de diseño distintos: un trazo interior que cuenta para el tamaño de un frame, y un trazo central o exterior que pinta la misma línea sin empujar nunca nada más en el lienzo. Tras cualquier importación, revisa esos dos puntos primero: si la alineación de trazo correcta llegó al elemento correcto, y si alguna esquina necesita su suavizado agregado de nuevo a mano.