# Régler la taille, les bordures et les effets

Cet article décrit les réglages de l’onglet **Styles** qui donnent sa forme à un bloc : sa taille et sa position, ses bordures et ses angles, son ombre, ses effets et ses transitions. Vous saurez les régler pour chaque état et chaque écran.

## Avant de commencer

- Les réglages de cet article se trouvent dans l’onglet **Styles** de la barre latérale, quand un bloc est sélectionné. Ils se répartissent entre les panneaux **Taille et espacement**, **Bordures**, **Effets** et **Transitions**.
- Tant que vous ne touchez à rien, le bloc garde son rendu naturel. Les valeurs affichées dans les champs vides ne sont pas appliquées au bloc.
- Les marges intérieures et extérieures du panneau **Taille et espacement** sont décrites dans [Espacer vos blocs](https://lovelyrender.com/fr/documentation/espacer-vos-blocs/).

## Choisir où le réglage s’applique

En haut de l’onglet **Styles**, deux rangées décident de ce que vous réglez. Tous les panneaux de cet article écrivent dans l’état et l’écran choisis.

| Rangée | Choix | Effet |
| --- | --- | --- |
| États | **Par défaut**, puis les états du bloc, par exemple **Survol**, **Focus** ou **Actif** | Le réglage s’applique quand le bloc est dans cet état. **Par défaut** donne la valeur de base. |
| Écrans | **Ensemble**, **Bureau**, **Tablette**, **Mobile** | **Ensemble** donne la valeur de tous les écrans. À partir de sa largeur, un écran ne garde que les valeurs qui diffèrent de **Ensemble**. |

![Le haut de l’onglet Styles d’une carte : la rangée des états Par défaut, Survol et Actif, la rangée des écrans, puis le panneau Taille et espacement avec Masquer ce bloc, Flex en ligne, la largeur du conteneur et les six champs de dimension.](https://static.lovelyrender.com/uploads/2026/10/969-doc-pages2-taille.png)

Un point de couleur marque chaque écran qui porte une valeur pour l’état en cours. Les écrans ne se recopient pas entre eux : une tablette sans valeur propre affiche celle de **Ensemble**, pas celle du bureau.

**Attention :** Si un réglage ne s’applique qu’au survol, vous étiez sur l’état **Survol**. Revenez sur **Par défaut** pour régler la valeur de base.

Quand le bloc porte un [style enregistré](https://lovelyrender.com/fr/documentation/styles-enregistres/), un champ qui en hérite s’affiche atténué. Selon la situation, un bouton placé à côté du champ rend la valeur du style, en supprime l’héritage ou efface votre valeur locale.

## Régler la taille d’un bloc

La section **Dimensions personnalisées** du panneau **Taille et espacement** fixe la largeur et la hauteur du bloc.

1. Sélectionnez le bloc, ouvrez l’onglet **Styles**, puis le panneau **Taille et espacement**.
2. Pour un conteneur centré, cliquez sur une valeur de **Largeur du conteneur**, par exemple **1024**. Le bloc prend cette largeur maximale et se centre.
3. Pour une contrainte précise, saisissez une valeur dans l’un des six champs et choisissez son unité.

| Réglage | Effet | Valeurs |
| --- | --- | --- |
| **Largeur du conteneur** | Fixe la largeur maximale. Toute valeur sauf **Fluide** centre le bloc avec des marges automatiques. | **Fluide** (100 %), 1920, 1600, 1440, 1280, 1024 et 640 |
| **Largeur**, **L min**, **L max** | La largeur du bloc, sa largeur minimale et sa largeur maximale. | `%`, `px`, `dvh`, `svh`, `dvw` et `svw` |
| **Hauteur**, **H min**, **H max** | La hauteur du bloc, sa hauteur minimale et sa hauteur maximale. | Les mêmes unités |
| **Proportions** | Le rapport entre largeur et hauteur, par exemple `16` / `9`. La valeur s’enregistre quand les deux nombres sont remplis. | Deux nombres, 1 au minimum |

Cliquer une seconde fois sur la valeur choisie de **Largeur du conteneur** ne l’annule pas. Pour la retirer, cliquez sur le bouton de remise à zéro placé à côté du libellé.

Le bouton ƒ, à côté du libellé d’un champ, combine deux valeurs, par exemple `100dvh − 92px` pour une section qui remplit l’écran sous un en-tête de 92 px. Le bouton du milieu passe de l’addition à la soustraction.

Dans un carrousel, une unité de plus s’ajoute : `cqi`, une part de la largeur du carrousel. Une carte réglée sur `33.333cqi − 16px` en montre trois côte à côte, quel que soit l’écran.

Les proportions se règlent par écran : une image en `21` / `9` sur ordinateur peut passer en `4` / `5` sur téléphone.

## Masquer un bloc sur un écran

L’interrupteur **Masquer ce bloc** retire le bloc de la page pour l’écran choisi. Pour adapter une section au téléphone, dupliquez-la, adaptez la copie, puis masquez chaque version sur l’écran où elle ne convient pas.

| État | Effet |
| --- | --- |
| **Par défaut** | Le bloc est masqué jusqu’à ce qu’il devienne actif. |
| **Actif** | Le bloc est masqué tant qu’il est actif. |
| Un autre état, par exemple **Coché** ou **Invalide** | Le bloc est masqué tant qu’il est dans cet état. |
| **Survol** et **Focus** | L’interrupteur ne s’affiche pas. |

L’interrupteur suivant passe le bloc en ligne, à côté de ses voisins. Son libellé suit la disposition du bloc : **Bloc en ligne**, **Flex en ligne** ou **Grille en ligne**.

Le réglage **Visibilité** du panneau **Effets** masque aussi un bloc, mais lui garde sa place dans la page.

## Positionner un bloc

Le menu **Position** sort un bloc du flux normal de la page. Il se règle par état et par écran : un panneau collé sur ordinateur peut redevenir normal sur téléphone.

| Position | Effet |
| --- | --- |
| **Par défaut** | Le bloc suit le flux normal de la page. Valeur par défaut. |
| **Relative** | Le bloc se décale par rapport à sa place normale, sans déplacer ses voisins. |
| **Collante** | Le bloc défile avec la page jusqu’au bord de l’écran, puis y reste fixe. |
| **Absolue** | Le bloc sort du flux et se place dans le bloc parent positionné le plus proche, par exemple une section réglée sur **Relative**. |
| **Fixe** | Le bloc reste au même endroit de la fenêtre, quel que soit le défilement. Pour un en-tête ou un bouton flottant. |

Dès qu’une position autre que **Par défaut** est réglée sur l’écran affiché, la section **Décalage** apparaît avec quatre champs : **Haut**, **Droite**, **Bas** et **Gauche**. Ils acceptent les mêmes unités et le même bouton ƒ que les dimensions.

Un bloc **Collante** ou **Fixe** en haut de l’écran ne cache rien. Un lien vers une ancre, l’élément atteint au clavier et l’étape d’un formulaire s’arrêtent 16 px sous lui. Le site mesure sa hauteur à chaque changement de taille ou d’écran.

Le réglage **Flottement** fait flotter un bloc à gauche ou à droite. Le texte voisin coule autour de lui.

### Gérer ce qui dépasse

Le réglage **Débordement** décide de ce que devient un contenu plus grand que son bloc. Les choix sont des icônes, avec leur nom au survol.

| Choix | Effet |
| --- | --- |
| **Utiliser la valeur héritée** | Aucune règle. Valeur par défaut. |
| **Visible** | Le contenu qui dépasse reste visible. |
| **Masqué** | Le contenu qui dépasse est coupé. |
| **Défilement** | Le bloc affiche des barres de défilement. |
| **Auto** | Le bloc défile seulement si son contenu dépasse. Un tableau trop large pour un téléphone se lit en glissant de côté. |
| **Rogner** | Le contenu qui dépasse est coupé. Le bloc ne devient pas une zone de défilement. À choisir sur une section qui contient un bloc **Collante**, que **Masqué** empêcherait de coller. |
| **Glisser** | Les enfants forment une rangée sans barre de défilement, qu’on fait glisser au doigt. La rangée se cale sur chaque enfant. À la souris, la rangée défile à la molette avec Maj. |
| **Hérité** | Le bloc reprend le réglage de son parent. |

## Poser une bordure

1. Dans l’onglet **Styles**, ouvrez le panneau **Bordures**. Un aperçu du bloc s’affiche en haut du panneau.
2. Sous **Bordure**, saisissez une **Épaisseur** en pixels. Le style et la couleur deviennent disponibles.
3. Choisissez le **Style** parmi **Pleine**, **Tirets**, **Pointillés** ou **Double**.
4. Cliquez sur la pastille et choisissez la couleur.

![Le panneau Bordures d’une carte : l’aperçu, la bordure avec son épaisseur, son style et sa couleur, le rayon des angles réglé sur 16px, l’avertissement sur les images, la forme des angles et l’ombre portée Élévation 1.](https://static.lovelyrender.com/uploads/2026/10/972-doc-pages2-bordures.png)

Le bouton **Séparer**, à droite de la rangée, donne à chaque côté sa propre bordure : **Haut**, **Droite**, **Bas** et **Gauche**. Le bouton **Fusionner** revient à une bordure unique. Une épaisseur de 0 efface la bordure.

## Arrondir les angles

Le champ **Rayon des angles** est une liste déroulante des rayons de votre design system, chacun affiché par sa valeur. Choisissez un rayon pour l’appliquer à tous les angles, ou **Aucun** pour retirer l’arrondi. Le bouton **Séparer** donne une liste à chaque angle.

| Rayons | Valeurs |
| --- | --- |
| Huit crans, les mêmes que l’échelle d’espacement | 2, 4, 8, 16, 24, 32, 64 et 128 px |
| Un neuvième cran | 50 %, qui arrondit un carré en cercle et un rectangle en ellipse |

Le design choisi dans le catalogue peut changer ces valeurs. Les boutons, les champs de formulaire et leurs listes déroulantes prennent le rayon de 4 px : modifier ce cran les arrondit tous d’un coup.

Le bouton **+** crée un rayon et le crayon modifie celui qui est appliqué. Seuls les administrateurs du site voient ces deux boutons. Le formulaire ne demande qu’une valeur et une unité (`px`, `em`, `rem` ou `%`). Une modification vaut pour tous les blocs qui utilisent ce rayon. Une valeur n’existe qu’une fois : un second rayon de 8 px est refusé.

Le bouton **Passer en mode avancé** affiche huit champs à unités libres, pour des angles elliptiques : un rayon horizontal et un rayon vertical par angle.

Quand un rayon est réglé sans que le débordement soit masqué, le panneau affiche **Les images peuvent ne pas suivre l’arrondi des coins.** Cliquez sur **Passer le débordement à Masqué.** pour que l’image suive l’arrondi.

Le champ **Forme des angles** change la forme d’un angle arrondi : **Arrondi**, **Creux**, **Encoche**, **Biseau** ou **Squircle**, entre le carré et le cercle. Il reste grisé tant qu’aucun rayon n’est réglé.

## Ajouter une ombre portée

Une ombre est une entrée de votre design system, comme une couleur. Vous la créez une fois et la posez sur autant de blocs que vous voulez. La modifier la modifie sur tous les blocs qui la portent.

1. Dans le panneau **Bordures**, ouvrez la liste **Ombre portée** et choisissez une ombre, par exemple **Élévation 2**.
2. Pour la retirer, choisissez **Aucun**. Le bloc reprend l’ombre de son style enregistré s’il en porte une.

Chaque site reçoit cinq ombres, **Élévation 1** à **Élévation 5**. Chacune superpose une ombre nette noire à 30 % et une ombre diffuse noire à 15 %. Elles s’éloignent et s’adoucissent à mesure que le niveau monte.

| Ombre | Ombre nette (Y, flou) | Ombre diffuse (Y, flou, étalement) |
| --- | --- | --- |
| **Élévation 1** | 1 px, 2 px | 1 px, 3 px, 1 px |
| **Élévation 2** | 1 px, 2 px | 2 px, 6 px, 2 px |
| **Élévation 3** | 1 px, 3 px | 4 px, 8 px, 3 px |
| **Élévation 4** | 2 px, 3 px | 6 px, 10 px, 4 px |
| **Élévation 5** | 4 px, 4 px | 8 px, 12 px, 6 px |

Vous pouvez modifier les couches d’une ombre livrée : votre version vaut pour votre site. Une ombre livrée ne se renomme pas et ne se supprime pas.

### Créer une ombre

1. À droite de la liste **Ombre portée**, cliquez sur **+**. Le formulaire s’ouvre avec une couche.
2. Saisissez un **Nom**. Ce champ est obligatoire, car le nom désigne l’ombre dans la liste.
3. Dans la carte **Couche 1**, réglez le décalage **X** et **Y**, le **Flou** et l’**Étalement**, en pixels, puis la couleur.
4. Pour superposer une seconde ombre, cliquez sur **Ajouter une couche**.
5. Cliquez sur **Enregistrer**. L’ombre est posée sur le bloc.

![Le formulaire d’une ombre : le champ Nom, deux couches avec leurs champs X, Y, Flou et Étalement, l’interrupteur Vers l’intérieur et la couleur, puis Ajouter une couche, Annuler et Enregistrer.](https://static.lovelyrender.com/uploads/2026/10/976-doc-pages2-ombre.png)

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **X**, **Y** | Le décalage horizontal et vertical, en pixels entiers. Une valeur négative est acceptée. | Vide |
| **Flou** | Le flou, en pixels, 0 ou plus. | Vide |
| **Étalement** | L’étalement, en pixels. Négatif, il resserre l’ombre. | Vide |
| **Vers l’intérieur** | Dessine la couche à l’intérieur du bloc. | Désactivé |
| Couleur | Une couleur unie, sans dégradé. | Aucune |

Une ombre compte jusqu’à huit couches. La première est peinte au-dessus des suivantes : les flèches **Monter** et **Descendre** changent leur ordre. L’enregistrement est refusé si le nom est vide, ou si une couche ne règle ni décalage, ni flou, ni étalement, ni couleur.

Le crayon, à côté de **+**, modifie l’ombre choisie. Le formulaire affiche **Vos changements s’appliqueront à tous les blocs qui s’en servent.** Pour un effet propre à un bloc, créez plutôt une ombre.

**Remarque :** Une couleur choisie dans les pastilles de votre palette reste liée à cette couleur. Changer votre couleur de marque change l’ombre avec elle. Tant qu’une ombre s’en sert, la couleur ne peut pas être supprimée.

### Soulever une carte au survol

1. Sur l’état **Par défaut**, choisissez **Élévation 1** dans **Ombre portée**.
2. Passez sur l’état **Survol** et choisissez **Élévation 3**.
3. Revenez sur l’état **Par défaut** et ajoutez une transition de 200 ms comme dans la section « Adoucir un changement d’état ».

La carte se soulève sous le pointeur et redescend en douceur.

## Transformer un bloc

Avec le panneau **Effets**, vous faites tourner, déplacer, agrandir ou incliner un bloc sans changer la place qu’il occupe dans la page. Il s’ouvre de lui-même quand un effet est déjà réglé.

![Le haut du panneau Effets : la rotation avec ses raccourcis de −135° à 180° et son curseur, la translation X et Y, l’échelle X et Y liées puis l’inclinaison X et Y.](https://static.lovelyrender.com/uploads/2026/10/979-doc-pages2-effets.png)

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Rotation** | Fait tourner le bloc, de −180° à 180°, avec des raccourcis de −135° à 180°. À 0°, il redresse un bloc incliné par un style ou par l’état au repos. | 0° |
| **Translation** | Déplace le bloc sur **X** et **Y**, en `px`, `%`, `vw`, `vh`, `rem` ou `em`. | 0 |
| **Échelle** | Agrandit ou réduit le bloc, de 0 à 10, par pas de 0,01. 1 est la taille d’origine. Un bouton lie ou délie **X** et **Y**. | 1, X et Y liés |
| **Inclinaison** | Incline le bloc sur **X** et **Y**, de −80° à 80°. Au-delà, le bloc devient invisible. | 0° |
| **Origine des transformations** | Le point de pivot de la rotation, de l’échelle et de l’inclinaison, en `%`, `px` ou `em`. 0 % est le bord haut ou gauche, 100 % le bord bas ou droit. Un champ vide garde l’axe centré. | 50 %, 50 % |

Les transformations restent appliquées pendant les [animations](https://lovelyrender.com/fr/documentation/animations/) du bloc : une carte inclinée glisse en restant inclinée.

## Régler l’apparence d’un bloc

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Opacité** | La transparence du bloc, de 0 à 100 %. | 100 % |
| **Plan (z-index)** | L’ordre d’empilement, un nombre entier. Une carte qui passe devant ses voisines au survol se règle à l’état **Survol**. | Vide |
| **Filtre** | Un filtre de votre design system appliqué au bloc, par exemple un flou, des niveaux de gris, un sépia ou une luminosité. | **Aucun** |
| **Tracé de découpe** | Découpe le bloc dans une forme de votre design system. | **Aucun** |
| **Visibilité** | **Visible** ou **Masqué**. **Masqué** cache le bloc en lui gardant sa place. | Aucune |
| **Mode de fusion** | Mélange le bloc avec ce qui se trouve derrière, par exemple **Multiplier** ou **Superposition**. | **Par défaut** |
| **Curseur** | La forme du pointeur au survol du bloc, par exemple **Pointeur (main)**. | **Par défaut** |
| **Événements du pointeur** | **Aucun** fait que le bloc ne réagit plus à la souris. | **Auto** |

Un filtre et une découpe se créent avec le bouton **+** de leur champ et se modifient avec le crayon. Ces boutons, comme ceux des ombres et des rayons, sont réservés aux administrateurs du site : les autres rôles choisissent dans la liste. Comme une ombre, ils servent à tous les blocs qui les portent. Le filtre du panneau **Effets** agit sur le bloc lui-même. Le filtre d’arrière-plan agit sur ce qui se trouve derrière le bloc : il est décrit dans [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/).

### Découper un bloc dans une forme

Le constructeur de découpe demande d’abord une **Forme**. Toutes les valeurs sont en pourcentages de la taille du bloc : la même découpe convient à une bannière comme à une petite carte.

| Forme | Réglages | Usage |
| --- | --- | --- |
| **Rectangle** | Un retrait par côté et un **Arrondi des angles** facultatif. | Rogner une image. |
| **Cercle** | Le **Rayon** et la position du centre, **Centre X** et **Centre Y**. | Un portrait rond. |
| **Ellipse** | Le **Rayon horizontal**, le **Rayon vertical** et la position du centre. | Un ovale, une arche. |
| **Polygone** | Des **Points** X et Y, trois au minimum, avec **Ajouter un point** et **Retirer ce point**. | Un bandeau en biais, un losange. |

**Attention :** La découpe s’applique au bloc entier : son ombre portée et ce qui dépasse sont coupés par la même forme.

Une opacité, un filtre ou une découpe réglés sur le bloc ne se combinent pas avec une animation d’apparition, qui les anime elle-même. Réglez chacun d’un seul côté.

## Garder l’anneau de focus

Un visiteur qui navigue au clavier voit où il se trouve grâce à l’anneau de focus. Les liens, les boutons, les champs de formulaire, les interrupteurs, les cases à cocher et les questions d’accordéon reçoivent un anneau de 2 px quand ils prennent le focus au clavier. Sa couleur suit celle du texte de l’élément. Il n’apparaît pas à la souris.

Le réglage **Contour** du panneau **Effets** dessine un trait autour du bloc sans changer sa taille, contrairement à une bordure. Il demande une **Épaisseur** en pixels, un **Style** et une couleur. Le champ **Décalage**, de −99 à 99 px, apparaît dès qu’une épaisseur est réglée.

Pour remplacer l’anneau de focus par le vôtre, réglez le contour sur l’état **Focus**. Votre contour s’affiche à la place de l’anneau.

**Attention :** Supprimer la valeur héritée du contour supprime aussi l’anneau de focus du bloc. Le bloc n’a alors plus aucun repère au clavier. Pour retirer seulement le contour affiché au repos, réglez l’état **Focus**.

## Adoucir un changement d’état

Avec le panneau **Transitions**, un changement d’état glisse au lieu de sauter : une couleur, une ombre ou une bordure qui change au survol, au focus ou quand une case est cochée. Sans transition, le changement est instantané.

1. Sélectionnez le bloc, choisissez l’état **Par défaut** et ouvrez le panneau **Transitions**.
2. Cliquez sur **Ajouter une transition**. Une ligne apparaît.
3. Sous **Propriétés**, laissez **Toutes**, ou choisissez **Personnalisées** pour nommer les propriétés concernées.
4. Réglez la **Durée (ms)**, la **Fonction de progression** et l’**Attente (ms)**.
5. Survolez la barre d’aperçu pour voir le rythme choisi.

![Une transition dans le panneau Transitions : Propriétés réglé sur Toutes, une durée de 300 ms, la fonction de progression Arrêt progressif, une attente de 0 ms, la barre d’aperçu et le bouton Ajouter une transition.](https://static.lovelyrender.com/uploads/2026/10/982-doc-pages2-transitions.png)

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Propriétés** | **Toutes** les propriétés qui changent, ou **Personnalisées**. Ce second choix apparaît quand le bloc a déjà des réglages sur un autre état. Il propose alors ces réglages. | **Toutes** |
| **Durée (ms)** | La durée du changement, en millisecondes. | 300 |
| **Fonction de progression** | La courbe du mouvement : **Démarrage et arrêt progressifs**, **Démarrage progressif**, **Arrêt progressif**, **Linéaire** ou **Personnalisée (cubic-bezier)**. | **Arrêt progressif** |
| **Attente (ms)** | Le délai avant le départ, en millisecondes. | 0 |

Plusieurs lignes peuvent s’empiler : la couleur en 200 ms et l’ombre en 500 ms, chacune à son rythme.

**Conseil :** Posez la transition sur l’état **Par défaut** : elle joue à l’aller et au retour. Posée sur **Survol** seul, elle ne joue qu’à l’entrée du survol. Le bloc reprend ensuite sa valeur de base d’un coup.

Un visiteur peut demander moins de mouvement, dans les réglages de son appareil ou avec un sélecteur d’animations. Il ne voit alors rien bouger au survol ni au focus. La rotation, la translation, l’échelle et l’inclinaison des états **Survol** et **Focus** ne s’appliquent pas. Les changements de couleur, de fond, de bordure, d’ombre, d’opacité et de filtre restent visibles, en douceur.

## Voir aussi

- [Espacer vos blocs](https://lovelyrender.com/fr/documentation/espacer-vos-blocs/)
- [Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/)
- [Animer un bloc](https://lovelyrender.com/fr/documentation/animations/)
- [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/)