### [Come aggiungere un bordo personalizzato al proprio modulo](https://wpforms.com/developers/how-to-put-a-border-around-your-form/)

**Pubblicato:** 9 febbraio 2022
**Autore:** Umair Majeed

**Estratto:** Questo tutorial ti mostrerà come utilizzare i CSS per aggiungere un bordo attorno ai tuoi moduli.

**Contenuto:**

Ti piacerebbe far risaltare il tuo modulo sul tuo sito web aggiungendo un bordo personalizzato? Con un semplice frammento di codice, puoi aggiungere un bordo elegante attorno al tuo modulo per migliorarne l'aspetto visivo e renderlo più prominente sulla tua pagina.

Questa guida ti mostrerà come aggiungere e personalizzare un bordo attorno ai tuoi WPForms.

## Configurazione del modulo

Per iniziare, dovrai identificare l'ID del tuo modulo. Questo è essenziale poiché il codice punterà a un modulo specifico utilizzando questo ID. Se hai bisogno di aiuto per trovare l'ID del tuo modulo, consulta la nostra guida su [come trovare gli ID dei moduli e dei campi](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/#locating-the-field-id).

## Aggiunta del codice per il bordo

Successivamente, dovrai aggiungere il frammento di codice che creerà il bordo attorno al tuo modulo. Se hai bisogno di aiuto per aggiungere frammenti di codice al tuo sito, consulta questo tutorial su [come aggiungere CSS personalizzati](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).

Il codice sopra riportato aggiunge un bordo al tuo modulo con alcuni stili aggiuntivi per un migliore impatto visivo. Ecco cosa fa ogni riga:

- Alla **riga 2**, sostituisci 1234 con l'ID effettivo del tuo modulo.
- Alla **riga 3**, puoi modificare la larghezza del bordo (2px), lo stile (solido) e il colore (#333333).
- Alla **riga 4**, il padding crea spazio tra gli elementi del modulo e il bordo.
- Alla **riga 5**, border-radius aggiunge angoli arrotondati al tuo modulo.
- Alla **riga 6**, background-color imposta uno sfondo bianco per il tuo modulo.
- Alla **riga 7**, box-shadow aggiunge un leggero effetto ombra attorno al tuo modulo.

Se desideri applicare questo stesso CSS a tutti i tuoi moduli, usa invece questo CSS.

E questo è tutto ciò che serve per aggiungere un bordo al modulo! Desideri anche centrare i moduli? Consulta il nostro tutorial su [Come centrare un modulo](https://wpforms.com/developers/how-to-center-a-form/ "Come centrare un modulo").

**Categorie:** Stile

**Tag:** CSS

---