Le module de spécificationArrière-plans et bordures CSS (CSS backgrounds and borders en anglais) fournit des propriétés permettant d'ajouter des bordures, des coins arrondis et des ombres aux éléments.

Vous pouvez ajouter différents types de styles de bordures, y compris des bordures composées d'images de tous types, que ce soitdes images matricielles ou des dégradés CSS. Les bordures peuvent être carrées ou arrondies, et un rayon de courbure différent peut être défini pour chaque coin. Les éléments peuvent être arrondis, qu'ils aient ou non une bordure visible.

Les ombres des boîtes comprennent les ombres intérieures et extérieures, les ombres simples ou multiples, et les ombres opaques ou transparentes. Une ombre extérieure projette une ombre comme si la bordure de l'élément était opaque. Une ombre intérieure projette une ombre comme si tout ce qui se trouvait à l'extérieur du bord de remplissage était opaque. L'ombre peut être unie et opaque ou inclure une distance d'étalement avec une transition de la couleur de l'ombre vers la transparence.

Les propriétés de ce module vous permettent également de définir si les cellules à l'intérieur d'un élément<table> doivent avoir des bordures communes ou séparées.

Arrière-plans, bordures et ombres de boîtes en action

Cet exemple de bordures, d'arrière-plans et d'ombres en boîte se compose d'images d'arrière-plan centrées composées de dégradés linéaires et radiaux. Une série d'ombres en boîte fait ressortir la bordure. L'élément de gauche a une image de bordure définie. L'élément de droite a une bordure arrondie en pointillés.

<article>  <div></div>  <div></div></article>

article {  display: flex;  gap: 10px;}div {  color: #58ade3;  height: 320px;  width: 240px;  padding: 20px;  margin: 10px;  border: dotted 15px; /* valeur par défaut `currentColor` */  border-radius: 100px 0;  background-image:    radial-gradient(      circle,      transparent 60%,      currentColor 60% 70%,      transparent 70%    ),    linear-gradient(45deg, currentColor, white),    linear-gradient(transparent, transparent);  /* la troisième image d'arrière-plan transparente a été ajoutée pour fournir de l'espace à la couleur d'arrière-plan */  background-color: currentColor;  background-position: center;  background-size:    60px 60px,    120px 120px;  background-clip: content-box, content-box, padding-box;  box-shadow:    inset 5px 5px 5px rgb(0 0 0 / 0.4),    inset -5px -5px 5px rgb(0 0 0 / 0.4),    5px 5px 5px rgb(0 0 0 / 0.4),    -5px -5px 5px rgb(0 0 0 / 0.4);}div:first-of-type {  border-radius: 0;  border-image-source: repeating-conic-gradient(    from 3deg at 25% 25%,    currentColor 0 3deg,    transparent 3deg 6deg  );  border-image-slice: 30;}

Les images d'arrière-plan sont définies avec la propriété CSSbackground-image. Les images sont centrées avec la propriétébackground-position. Différentes valeurs de la propriétébackground-clip pour les images d'arrière-plan multiples sont utilisées pour faire en sorte que les images d'arrière-plan restent à l'intérieur de la boîte de contenu. La couleur d'arrière-plan est découpée dans le cadre de remplissage, ce qui empêche l'arrière-plan d'apparaître à travers les sections transparentes pour les propriétésborder-image etborder-image avec la valeurdotted. Les coins arrondis de l'élément de droite sont créés à l'aide de la propriétéborder-image. Une seule déclarationbox-shadow est utilisée pour définir toutes les ombres, tant à l'intérieur qu'à l'extérieur.

Cliquez sur « Play » dans l'exemple ci-dessus pour voir ou modifier le code de l'animation dansMDN Playground.

Référence

Propriétés CSS

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• background (version courte)
• background-position-x
• background-position-y
• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-bottom (version courte)
• border-left-color
• border-left-style
• border-left-width
• border-left (version courte)
• border-right-color
• border-right-style
• border-right-width
• border-right (version courte)
• border-top-color
• border-top-style
• border-top-width
• border-top (version courte)
• border-color (version courte)
• border-style (version courte)
• border-width (version courte)
• border (version courte)
• border-bottom-left-radius
• border-bottom-right-radius
• border-top-left-radius
• border-top-right-radius
• border-radius (version courte)
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-image (version courte)
• box-shadow

Le module d'arrière-plan CSS niveau 4 introduit également les propriétésbackground-position-block,background-position-inline,background-repeat-block,background-repeat-inline,background-repeat-x,background-repeat-y etbackground-tbd. Actuellement, aucun navigateur ne prend en charge ces fonctionnalités.

Types de données

• Le type énuméré<line-style>

Guides

Utiliser plusieurs arrière-plans

Dans cet article, on voit comment paramétrer un ou plusieurs arrière-plans pour un élément.

Redimensionner les images d'arrière-plan

Dans cet article, on voit comment modifier la taille et paramétrer la répétition d'une image d'arrière-plan.

Redimensionner les images d'arrière-plan SVG

Comment le rapport d'aspect SVG, les valeurs de dimension SVG et la propriété CSSbackground-size impactent le redimensionnement des images d'arrière-plan SVG.

Utilisation de dégradés CSS

Dans cet article, on voit comment créer des images d'arrière-plan dégradées CSS.

Apprendre CSS : Arrière-plans et bordures

Dans cet article, on voit comment implémenter des images décoratives à l'aide d'images d'arrière-plan CSS.

Apprendre CSS : Le modèle de boîte

Dans cet article, on voit comment les bordures, ainsi que d'autres propriétés du modèle de boîte, affectent le modèle de boîte CSS.

Notions associées

• border-block-end-color
• border-block-start-color
• border-inline-end-color
• border-inline-start-color
• border-block-end-style
• border-block-start-style
• border-inline-end-style
• border-inline-start-style
• border-block-end-width
• border-block-start-width
• border-inline-end-width
• border-inline-start-width
• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius
• box-sizing
• box-decoration-break
• text-shadow
• Le type de donnée<url>
• Le type de donnéeurl()
• Le type de donnée<image>
• Le type de donnéeposition
• Le mot-clécurrentcolor

Spécifications

Voir aussi

• filter
• backdrop-filter
• Le filtre de fonctiondrop-shadow()
• Appliquer des couleurs sur des éléments HTML grâce à CSS
• Générateur pourborder-image
• Générateur pourborder-radius