--- url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/bordi-e-ombre' title: 'Aggiungere bordi, angoli arrotondati e ombre | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:45:20+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Incornicia una card, arrotonda gli angoli di una foto o solleva un riquadro dalla pagina con un’ombra. Imposti tutto questo nel pannello Stile dell’elemento, e puoi cambiarlo al passaggio del mouse nel pannello Stile hover. Usalo per far risaltare una card. Per la stessa cornice su un’intera serie di card, una classe condivisa le mantiene simili. Il video segue la ricetta sotto: trasforma un blocco di testo in una card con un bordo, angoli tondi e un’ombra che si intensifica al passaggio del mouse. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Aggiungere bordi, angoli arrotondati e ombre' description: |- Incornicia una card, arrotonda gli angoli di una foto o solleva un riquadro dalla pagina con un’ombra. Imposti tutto questo nel pannello Stile dell’elemento, e puoi cambiarlo al passaggio del mouse nel pannello Stile hover. Usalo per far risaltare una card. Per la stessa cornice su un’intera serie di card, una classe condivisa le mantiene simili. Il video segue la ricetta sotto: trasforma un blocco di testo in una card con un bordo, angoli tondi e un’ombra che si intensifica al passaggio del mouse. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T13:45:20+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/bordi-e-ombre' articleSection: 'Dai stile agli elementi' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/bordi-e-ombre' description: |- Incornicia una card, arrotonda gli angoli di una foto o solleva un riquadro dalla pagina con un’ombra. Imposti tutto questo nel pannello Stile dell’elemento, e puoi cambiarlo al passaggio del mouse nel pannello Stile hover. Usalo per far risaltare una card. Per la stessa cornice su un’intera serie di card, una classe condivisa le mantiene simili. Il video segue la ricetta sotto: trasforma un blocco di testo in una card con un bordo, angoli tondi e un’ombra che si intensifica al passaggio del mouse. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/it' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: it --- [Centro assistenza](/it/hc)/[Documentazione](/it/hc/documentazione) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Crea le pagine](/it/hc/documentation/learn-dxpr-builder/build) /[Dai stile agli elementi](/it/hc/documentation/learn-dxpr-builder/element-settings) # Aggiungere bordi, angoli arrotondati e ombre. Impara DXPR BuilderCrea le pagineDai stile agli elementi ## In questa guida Guide correlate - [Aggiungere spazio dentro e intorno agli elementi](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/spaziatura) Incornicia una card, arrotonda gli angoli di una foto o solleva un riquadro dalla pagina con un’ombra. Imposti tutto questo nel pannello **Stile** dell’elemento, e puoi cambiarlo al passaggio del mouse nel pannello **Stile hover**. Usalo per far risaltare una card. Per la stessa cornice su un’intera serie di card, una classe condivisa le mantiene simili. Il video segue la ricetta sotto: trasforma un blocco di testo in una card con un bordo, angoli tondi e un’ombra che si intensifica al passaggio del mouse. ## Prima di iniziare - Apri la pagina in DXPR Builder; indicare un elemento mostra la sua barra di controllo con **Altro**. È la prima volta che usi il page builder? Vedi [La tua prima pagina](/it/hc/documentazione/impara-dxpr-builder/per-iniziare/prima-pagina). - **Salva** nella finestra mantiene una modifica nell’editor. **Salva** nella barra degli strumenti del page builder sopra i tuoi contenuti memorizza la pagina e mostra “Campo salvato”. - **Evidenzia una cosa.** Un bordo o un’ombra attira l’occhio su una data chiave, un’offerta o una citazione. Mettilo su tutto e smette di funzionare. - **Mantieni simile una serie.** Per la stessa cornice su molte card, salva una card come modello o usa una classe condivisa. Vedi [ID HTML e classi](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/css-personalizzato). - **Lascia che il tema regoli le ombre.** I cinque livelli **Ombra esterna** sono definiti una volta per l’intero sito. Il tuo tema può ristilizzare un livello, e ogni elemento che lo usa segue. ## Ricetta: una card evidenziata Ottieni un riquadro morbido con un bordo sottile nel colore del tuo brand. Ha angoli tondi e un’ombra che cresce al passaggio del mouse. 1. Passa sopra l’elemento **Testo**, fai clic su **Altro**, poi **Impostazioni**. 2. Apri il pannello **Stile**. Il box model sta in cima. I suoi lucchetti iniziano aperti; fai clic sul lucchetto accanto a **Padding** per chiuderlo, così i suoi quattro lati si muovono insieme. 3. Fai clic sul lato superiore di **Padding**, digita 32 e premi Invio. Tutti e quattro i lati ora dicono 32px. 4. Scegli un colore **Sfondo** chiaro, come un grigio pallido. 5. Imposta **Stile bordo** su **Solid**. 6. Chiudi il lucchetto accanto a **Bordo**, poi fai clic su uno dei suoi lati, digita 1 e premi Invio. 7. Scegli un **Colore bordo**, imposta **Raggio del bordo** su 16 e imposta **Ombra esterna** su 3. 8. Apri il pannello **Stile hover** e imposta **Ombra esterna** su 5. 9. Fai clic su **Salva** nella finestra, poi **Salva** nella barra degli strumenti. 10. Scegli **Anteprima** nel menu di visualizzazione (l’icona dell’occhio) e indica la card. La sua ombra si intensifica. ## Cosa vedi La card ha un bordo sottile nel tuo colore, angoli tondi e un’ombra morbida sotto di essa. In **Anteprima**, l’ombra si intensifica mentre il puntatore è sopra la card e torna indietro quando se ne va. ## Come è costruito un bordo Un bordo ha bisogno di tre impostazioni, e il pannello le distribuisce. Imposta tutte e tre: 1. **Stile bordo** sceglie la linea: **Solid**, **Dotted** o **Dashed**. Su **Predefiniti del tema**, la maggior parte degli elementi non ha alcun bordo. **None** rimuove un bordo disegnato dal tuo tema. 2. L’anello **Bordo** del box model imposta la larghezza di ogni lato, da 0 a 50 px. Se lo lasci vuoto, il browser usa la sua larghezza di circa 3 px. 3. **Colore bordo** imposta il colore. Se lo lasci vuoto, il bordo prende il colore del testo. **Raggio del bordo** arrotonda tutti e quattro gli angoli, da 0 a 100 px. Arrotonda anche lo sfondo e l’ombra. Su un’**Immagine** arrotonda l’immagine stessa. Per un cerchio, rendi l’elemento quadrato. Poi imposta **Raggio del bordo** a metà della sua larghezza in pixel: 100 per un elemento largo 200 px. Per qualsiasi cosa più larga, aggiungi la classe **Circolare (raggio 50%)** sotto **Classi HTML**. Su un’**Immagine** questa classe arrotonda la cornice intorno all’immagine, non l’immagine, quindi usa **Raggio del bordo** lì. ## Livelli ombra esterna | Livello | Ombra sotto l’elemento | |---|---| | 0 | Nessuna da DXPR Builder; decide il tuo tema | | 1 | 2 px giù, 7 px sfocatura, 20% nero | | 2 | 4 px giù, 12 px sfocatura, 30% nero | | 3 | 5 px giù, 25 px sfocatura, 30% nero | | 4 | 8 px giù, 38 px sfocatura, 30% nero | | 5 | 12 px giù, 57 px sfocatura, 30% nero | Questi sono i livelli predefiniti. Ogni livello è uno stile condiviso, non un valore memorizzato nella tua pagina, quindi un tema può ritarare un livello per l’intero sito. Per il tuo sviluppatore di temi: i livelli sono le variabili CSS `--dxb-box-shadow-1` a `--dxb-box-shadow-5`. Nel pannello **Stile hover**, **Ombra esterna** imposta il livello mentre il puntatore è sopra l’elemento. La nuova ombra sfuma in entrata in 0,15 secondi. Un livello più alto al passaggio del mouse fa sembrare una card sollevata. **Classi HTML** offre più forme: **Ombra esterna sollevata**, **Ombra esterna rialzata**, **Ombra 3D** e **Ombra esterna orizzontale curva**. Ha anche **Ombra piccola**, **Ombra predefinita** e **Ombra grande** di Bootstrap. Usa un’ombra per elemento. Le classi ombra di Bootstrap battono il cursore **Ombra esterna**. ## Se non vedi il bordo, gli angoli o l’ombra che hai impostato - **Il bordo non appare.** **Stile bordo** è su **Predefiniti del tema** o **None**. Scegli **Solid**, **Dotted** o **Dashed**. - **Il bordo è più spesso di quanto vuoi.** Nessuna larghezza è impostata, quindi il browser usa circa 3 px. Imposta i lati **Bordo** nel box model. - **Il bordo ha il colore sbagliato.** Un **Colore bordo** vuoto prende il colore del testo. Scegli un **Colore bordo**. - **Gli angoli restano quadrati.** Una classe come **Nessun angolo arrotondato (rounded-0)** sotto **Classi HTML**, o una regola del tema con `!important`, vince. Rimuovi il chip, o chiedi al tuo webmaster della regola del tema. - **Gli angoli si arrotondano ma non appare alcun cerchio.** Il cursore si ferma a 100 px. Usa la classe **Circolare (raggio 50%)**. - **Ombra esterna non cambia niente.** Una classe ombra Bootstrap come **Ombra grande** sotto **Classi HTML** vince. Rimuovi il suo chip. Anche il livello 1 è tenue, quindi prova il livello 3 per testare. - **L’ombra non cresce al passaggio del mouse.** Imposta **Ombra esterna** nel pannello **Stile hover**, non in **Stile**, e scegli un livello più alto di quello a riposo. - **Solo un lato è cambiato.** Il lucchetto accanto a **Padding** o **Bordo** era aperto. Chiudilo e inserisci di nuovo il valore. - **L’ombra hover non si mostra mai su un telefono.** I touch screen non hanno puntatore, quindi un aspetto hover si mostra solo dopo un tocco. ## Passi successivi - [Spaziatura](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/spaziatura): dai al contenuto spazio dentro il bordo.