### [Añadir un borde personalizado alrededor de tu formulario](https://wpforms.com/developers/how-to-put-a-border-around-your-form/) **Publicado:** 9 de febrero de 2022 **Autor:** Umair Majeed **Extracto:** Este tutorial te mostrará cómo usar CSS para colocar un borde alrededor de tus formularios. **Contenido:** ¿Te gustaría que tu formulario destaque en tu sitio web añadiendo un borde personalizado? Con un simple fragmento de código, puedes añadir un borde elegante alrededor de tu formulario para mejorar su atractivo visual y hacerlo más prominente en tu página. Esta guía te mostrará cómo añadir y personalizar un borde alrededor de tus WPForms. ## Configuración de tu formulario Para empezar, necesitarás identificar el ID de tu formulario. Esto es esencial ya que el código se dirigirá a un formulario específico utilizando este ID. Si necesitas ayuda para encontrar el ID de tu formulario, consulta nuestra guía sobre [cómo encontrar los IDs de formularios y campos](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/#locating-the-field-id). ## Añadir el código del borde A continuación, necesitarás añadir el fragmento de código que creará el borde alrededor de tu formulario. Si necesitas ayuda para añadir fragmentos de código a tu sitio, revisa este tutorial sobre [cómo añadir CSS personalizado](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/). El código anterior añade un borde a tu formulario con algunos estilos adicionales para un mejor atractivo visual. Esto es lo que hace cada línea: - En la **línea 2**, reemplaza 1234 con el ID real de tu formulario. - En la **línea 3**, puedes modificar el ancho del borde (2px), el estilo (sólido) y el color (#333333). - En la **línea 4**, el relleno crea espacio entre los elementos de tu formulario y el borde. - En la **línea 5**, el radio del borde añade esquinas redondeadas a tu formulario. - En la **línea 6**, el color de fondo establece un fondo blanco para tu formulario. - En la **línea 7**, la sombra de caja añade un sutil efecto de sombra alrededor de tu formulario. Si quisieras aplicar este mismo CSS a todos tus formularios, usa este CSS en su lugar. ¡Y eso es todo lo que necesitas para colocar un borde alrededor de tu formulario! ¿Te gustaría también centrar tus formularios? Consulta nuestro tutorial sobre [Cómo centrar un formulario](https://wpforms.com/developers/how-to-center-a-form/ "Cómo centrar un formulario"). **Categorías:** Estilismo **Etiquetas:** CSS ---