Saltar al contenido principal
El control de bordes del creador de páginas te da mucha más flexibilidad al personalizar los elementos compatibles dentro de embudos y sitios web. Desde un solo panel puedes ajustar el ancho del borde lado por lado, personalizar el radio de cada esquina y elegir entre varios estilos de borde, sin depender de CSS personalizado ni de soluciones improvisadas.
Este artículo cubre el panel Border (Borde) que aparece en la pestaña Styles (Estilos) de la barra lateral derecha del creador de páginas. Aplica tanto a embudos de venta como a sitios web.

​
Qué es el control de bordes

El Control de bordes te permite personalizar la apariencia del borde de los elementos compatibles del creador de páginas desde un panel centralizado. Puedes ajustar el estilo, el color, el ancho específico de cada lado y el radio de las esquinas para crear desde detalles sutiles hasta marcos visuales bien definidos. En la práctica, esto significa que un mismo elemento puede pasar de tener un contorno completo a tener solamente una línea inferior de acento, o a convertirse en una tarjeta con esquinas superiores redondeadas e inferiores rectas, sin salir del editor y sin escribir una sola línea de código.
El panel Border solo aparece en los elementos compatibles. Si seleccionas un elemento y no ves la sección Border dentro de la pestaña Styles, ese elemento no admite configuración de bordes todavía. Prueba seleccionando el contenedor que lo envuelve (columna, fila o sección).

​
Principales ventajas del control de bordes

​
Configuración de bordes disponible

El panel Border reúne los controles clave en un solo lugar, para que apliques estilos a los elementos compatibles más rápido y con menos rodeos.

​
Cómo se leen los cuatro campos de Border Sides

Los cuatro campos siguen el mismo orden que la caja del elemento en pantalla. Esta referencia rápida te ayuda a no equivocarte de campo cuando trabajas con valores desvinculados:

​
Catálogo de estilos de borde y cuándo usar cada uno

La lista de estilos va mucho más allá de la línea sólida. Esta tabla resume el efecto visual de cada uno y el escenario donde luce mejor:
Double, Groove, Ridge, Inset y Outset necesitan ancho suficiente para apreciarse. Con 1 px se ven prácticamente iguales a un Solid. Si eliges uno de estos estilos, sube el ancho a 3 px o más.

​
Cómo configurar los ajustes de control de bordes

1

Abre un embudo de ventas o un sitio web

Entra al creador de páginas desde el embudo o el sitio web que quieras editar.
2

Selecciona un elemento compatible

Haz clic sobre el elemento que incluya ajustes de borde (por ejemplo, un botón, una imagen, una sección o un contenedor).
3

Abre la pestaña Styles

En la barra lateral derecha, haz clic en Styles y desplázate hasta el panel Border.
4

Elige un estilo y un color de borde

Selecciona el Border Style en el desplegable y define el Color. Si el estilo queda en None, no verás cambios aunque configures el ancho.
5

Establece los valores de los lados del borde

Mantén los valores vinculados para usar el mismo ancho en todos los lados, o desvincúlalos para configurar cada lado individualmente.
6

Establece los valores de radio de las esquinas

Mantén los valores vinculados para redondear todas las esquinas por igual, o desvincúlalos para personalizar cada esquina de forma independiente.
7

Previsualiza, guarda y publica

Revisa el elemento en el lienzo, ajusta los valores y, cuando estés conforme, guarda y publica la página.

​
Cómo funcionan los valores vinculados y desvinculados

El ícono de cadena que aparece en el centro de Border Sides y de Corner Radius es el interruptor entre dos modos de trabajo:
Si desvinculas, escribes valores distintos y luego vuelves a vincular, el panel iguala todos los lados con un mismo valor. Anota tus números antes de volver al modo vinculado si piensas recuperarlos después.

​
Recetas de diseño listas para copiar

Estas combinaciones te sirven como punto de partida. Los valores están expresados en píxeles y en el orden superior · derecho · inferior · izquierdo.
Cuando uses una receta con radios altos (por ejemplo, 50 px) en un botón, asegúrate de que el alto del elemento sea mayor que el doble del radio. Si el radio supera la mitad del alto, el navegador lo recorta y el resultado deja de ser predecible.

​
Buenas prácticas y errores frecuentes

Elige dos o tres valores de radio para todo el proyecto (por ejemplo 0 px, 12 px y 50 px) y úsalos siempre. Mezclar 6, 9, 11 y 14 px en la misma página hace que el diseño se sienta descuidado aunque cada elemento por separado se vea bien.
Un borde de 1 px con buen contraste de color casi siempre se ve más profesional que uno de 4 px en un tono apagado. Antes de engrosar la línea, prueba a oscurecer el color.
Los bordes gruesos y los radios grandes consumen espacio horizontal. En pantallas estrechas pueden apretar el texto contra la línea. Cambia a la vista móvil del lienzo antes de publicar.
Si configuraste anchos y colores pero no ves nada, revisa dos cosas: que Border Style no esté en None y que el color del borde no coincida con el fondo del elemento.
Si redondeas mucho un contenedor que tiene una imagen a sangre dentro, la imagen se recorta siguiendo la curva. Es el comportamiento esperado: aprovéchalo para fotos de encabezado y evítalo cuando el contenido tenga texto pegado al borde.
No uses el borde como único indicador de estado (por ejemplo, marcar un campo con error solo cambiando el color de la línea). Acompáñalo siempre de un texto de apoyo.

​
Preguntas frecuentes

Sí. Usa el ícono de vincular o desvincular en Border Sides para pasar de un valor compartido a valores individuales para cada lado.
No. Las páginas existentes que utilizan configuraciones de borde anteriores seguirán funcionando con normalidad. Los controles nuevos solo se aplican cuando los editas.
Sí. Está disponible en todos los embudos y sitios web del creador de páginas.
Sí. Usa el ícono de vincular o desvincular en Corner Radius para configurar cada esquina de forma independiente.
Porque ese elemento no está entre los compatibles con ajustes de borde. Selecciona el contenedor que lo envuelve (columna, fila o sección) y aplica el borde ahí.
Los estilos Solid, Dashed, Dotted y Double se representan de forma prácticamente idéntica. Groove, Ridge, Inset y Outset dependen del cálculo de sombreado de cada navegador y pueden variar ligeramente en el tono. Verifica el resultado en la página publicada, no solo en el lienzo.
El panel Border trabaja sobre el elemento seleccionado. Si necesitas un tratamiento distinto por dispositivo, revisa primero los ajustes de visibilidad del elemento y, si el diseño lo permite, duplica el bloque para controlarlo de forma separada.
Cambia Border Style a None. Los anchos y el color quedan guardados, así que puedes recuperar el mismo borde volviendo a elegir el estilo, sin reescribir los valores.

​
Artículos relacionados

Animaciones de entrada para secciones, filas y columnas

Combina bordes bien definidos con animaciones de aparición para reforzar la jerarquía visual.

Crea páginas en el Creador de páginas

Crea, organiza y reordena páginas sin salir del editor.

​
¿Necesitas ayuda?

Antes de escribir a soporte, verifica que el elemento seleccionado sea compatible, que Border Style no esté en None y que los valores estén en el modo correcto (vinculado o desvinculado). Si sigues con problemas, escribe a soporte de Chateea en [email protected] o por WhatsApp al +1 829-580-7071.
Última modificación el 29 de septiembre de 2026