--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/bordures-et-ombres' title: 'Ajouter des bordures, des coins arrondis et des ombres | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:44:00+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Encadrez une carte, arrondissez les coins d’une photo ou soulevez une boîte de la page avec une ombre. Vous réglez tout cela dans le panneau Style de l’élément, et vous pouvez le changer au survol dans le panneau Hover style. Utilisez-le pour faire ressortir une carte. Pour le même cadre sur toute une série de cartes, une classe partagée les garde semblables. La vidéo suit la recette ci-dessous : elle transforme un bloc de texte en carte avec une bordure, des coins arrondis et une ombre qui s’approfondit au survol. 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: 'Ajouter des bordures, des coins arrondis et des ombres' description: |- Encadrez une carte, arrondissez les coins d’une photo ou soulevez une boîte de la page avec une ombre. Vous réglez tout cela dans le panneau Style de l’élément, et vous pouvez le changer au survol dans le panneau Hover style. Utilisez-le pour faire ressortir une carte. Pour le même cadre sur toute une série de cartes, une classe partagée les garde semblables. La vidéo suit la recette ci-dessous : elle transforme un bloc de texte en carte avec une bordure, des coins arrondis et une ombre qui s’approfondit au survol. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:44:00+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/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/bordures-et-ombres' articleSection: 'Styler vos éléments' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/bordures-et-ombres' description: |- Encadrez une carte, arrondissez les coins d’une photo ou soulevez une boîte de la page avec une ombre. Vous réglez tout cela dans le panneau Style de l’élément, et vous pouvez le changer au survol dans le panneau Hover style. Utilisez-le pour faire ressortir une carte. Pour le même cadre sur toute une série de cartes, une classe partagée les garde semblables. La vidéo suit la recette ci-dessous : elle transforme un bloc de texte en carte avec une bordure, des coins arrondis et une ombre qui s’approfondit au survol. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Styler vos éléments](/fr/hc/documentation/learn-dxpr-builder/element-settings) # Ajouter des bordures, des coins arrondis et des ombres. Apprendre DXPR BuilderCréer des pagesStyler vos éléments ## Dans ce guide Guides associés - [Ajouter de l'espace dedans et autour des éléments](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/espacement) Encadrez une carte, arrondissez les coins d’une photo ou soulevez une boîte de la page avec une ombre. Vous réglez tout cela dans le panneau **Style** de l’élément, et vous pouvez le changer au survol dans le panneau **Hover style**. Utilisez-le pour faire ressortir une carte. Pour le même cadre sur toute une série de cartes, une classe partagée les garde semblables. La vidéo suit la recette ci-dessous : elle transforme un bloc de texte en carte avec une bordure, des coins arrondis et une ombre qui s’approfondit au survol. ## Avant de commencer - Ouvrez la page dans DXPR Builder ; pointer un élément montre sa barre de contrôle avec **Plus**. Vous débutez avec le constructeur ? Voir [Votre première page](/fr/hc/documentation/apprendre-dxpr-builder/demarrage/premiere-page). - **Enregistrer** dans la boîte de dialogue garde une modification dans l’éditeur. **Enregistrer** sur la barre d’outils du constructeur au-dessus de votre contenu stocke la page et affiche « Saved field ». - **Mettez une chose en valeur.** Une bordure ou une ombre attire l’œil vers une date clé, une offre ou une citation. Mettez-la partout et elle cesse de fonctionner. - **Gardez une série semblable.** Pour le même cadre sur beaucoup de cartes, enregistrez une carte comme modèle ou utilisez une classe partagée. Voir [ID et classes HTML](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/css-personnalise). - **Laissez le thème accorder les ombres.** Les cinq niveaux de **Drop shadow** sont définis une fois pour tout le site. Votre thème peut restyler un niveau, et chaque élément qui l’utilise suit. ## Recette : une carte mise en valeur Vous obtenez une boîte douce avec une fine bordure de la couleur de votre marque. Elle a des coins arrondis et une ombre qui grandit au survol. 1. Survolez l’élément **Texte**, cliquez sur **Plus**, puis **Paramètres**. 2. Ouvrez le panneau **Style**. Le modèle de boîte se trouve en haut. Ses verrous commencent ouverts ; cliquez sur le verrou à côté de **Padding** pour le fermer, pour que ses quatre côtés bougent ensemble. 3. Cliquez sur le côté haut de **Padding**, saisissez 32 et appuyez sur Entrée. Les quatre côtés affichent désormais 32px. 4. Choisissez une couleur **Background** claire, comme un gris pâle. 5. Réglez **Border style** sur **Solid**. 6. Fermez le verrou à côté de **Border**, puis cliquez sur l’un de ses côtés, saisissez 1 et appuyez sur Entrée. 7. Choisissez une **Border color**, réglez **Border radius** sur 16 et **Drop shadow** sur 3. 8. Ouvrez le panneau **Hover style** et réglez **Drop shadow** sur 5. 9. Cliquez sur **Enregistrer** dans la boîte de dialogue, puis **Enregistrer** dans la barre d’outils. 10. Choisissez **Aperçu** dans le menu d’affichage (l’icône œil) et pointez la carte. Son ombre s’approfondit. ## Ce que vous voyez La carte a une fine bordure de votre couleur, des coins arrondis et une ombre douce en dessous. Dans **Aperçu**, l’ombre s’approfondit pendant que le pointeur est sur la carte et se calme à son départ. ## Comment une bordure est faite Une bordure exige trois réglages, et le panneau les étale. Réglez les trois : 1. **Border style** choisit la ligne : **Solid**, **Dotted** ou **Dashed**. Sur **Theme defaults**, la plupart des éléments n’ont aucune bordure. **None** retire une bordure dessinée par votre thème. 2. L’anneau **Border** du modèle de boîte règle la largeur de chaque côté, de 0 à 50 px. Si vous le laissez vide, le navigateur utilise sa propre largeur d’environ 3 px. 3. **Border color** règle la couleur. Si vous le laissez vide, la bordure prend la couleur du texte. **Border radius** arrondit les quatre coins, de 0 à 100 px. Il arrondit aussi l’arrière-plan et l’ombre. Sur une **Image**, il arrondit l’image elle-même. Pour un cercle, rendez l’élément carré. Puis réglez **Border radius** à la moitié de sa largeur en pixels : 100 pour un élément large de 200 px. Pour tout ce qui est plus large, ajoutez la classe **Circular (50% radius)** sous **HTML classes**. Sur une **Image**, cette classe arrondit le cadre autour de l’image, pas l’image, donc utilisez **Border radius** là. ## Niveaux de Drop shadow | Niveau | Ombre sous l’élément | |---|---| | 0 | Rien de DXPR Builder ; votre thème décide | | 1 | 2 px vers le bas, 7 px de flou, 20 % de noir | | 2 | 4 px vers le bas, 12 px de flou, 30 % de noir | | 3 | 5 px vers le bas, 25 px de flou, 30 % de noir | | 4 | 8 px vers le bas, 38 px de flou, 30 % de noir | | 5 | 12 px vers le bas, 57 px de flou, 30 % de noir | Ce sont les niveaux par défaut. Chaque niveau est un style partagé, pas une valeur stockée dans votre page, donc un thème peut réaccorder un niveau pour tout le site. Pour votre développeur de thème : les niveaux sont les variables CSS `--dxb-box-shadow-1` à `--dxb-box-shadow-5`. Dans le panneau **Hover style**, **Drop shadow** règle le niveau pendant que le pointeur est sur l’élément. La nouvelle ombre apparaît en fondu en 0,15 seconde. Un niveau plus élevé au survol donne à une carte un air soulevé. **HTML classes** propose plus de formes : **Lifted drop shadow**, **Raised drop shadow**, **3D shadow** et **Curved horizontal drop shadow**. Il a aussi les **Small shadow**, **Default shadow** et **Large shadow** de Bootstrap. Utilisez une ombre par élément. Les classes d’ombre Bootstrap battent le curseur **Drop shadow**. ## Si la bordure, les coins ou l’ombre réglés ne s’affichent pas - **La bordure n’apparaît pas.** **Border style** est sur **Theme defaults** ou **None**. Choisissez **Solid**, **Dotted** ou **Dashed**. - **La bordure est plus épaisse que voulu.** Aucune largeur n’est réglée, donc le navigateur utilise environ 3 px. Réglez les côtés **Border** dans le modèle de boîte. - **La bordure a la mauvaise couleur.** Un **Border color** vide prend la couleur du texte. Choisissez une **Border color**. - **Les coins restent carrés.** Une classe comme **No rounded corners (rounded-0)** sous **HTML classes**, ou une règle de thème avec `!important`, gagne. Retirez la pastille, ou demandez à votre webmestre au sujet de la règle de thème. - **Les coins s’arrondissent mais aucun cercle n’apparaît.** Le curseur s’arrête à 100 px. Utilisez la classe **Circular (50% radius)**. - **Drop shadow ne change rien.** Une classe d’ombre Bootstrap comme **Large shadow** sous **HTML classes** gagne. Retirez sa pastille. Le niveau 1 est aussi discret, donc essayez le niveau 3 pour tester. - **L’ombre ne grandit pas au survol.** Réglez **Drop shadow** dans le panneau **Hover style**, pas dans **Style**, et choisissez un niveau plus élevé que celui du repos. - **Un seul côté a changé.** Le verrou à côté de **Padding** ou **Border** était ouvert. Fermez-le et saisissez de nouveau la valeur. - **L’ombre de survol ne s’affiche jamais sur téléphone.** Les écrans tactiles n’ont pas de pointeur, donc un aspect de survol ne s’affiche qu’après un toucher. ## Et ensuite ? - [Espacement](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/espacement) : donnez au contenu de la place dans la bordure.