Surface.
L'élément HTML — texte, image, tableau, … compris entre deux balises — est inclus dans une boîte dont on peut définir le fond et la bordure.
On distingue, de l'intérieur vers l'extérieur :
marge extérieure "(margin)"
bordure "(border)"
espace intérieur "(padding)"
aire intérieure
Aire intérieure.
Couleur du fond.
La couleur de fond d'une boîte CSS est modifiée avec la propriété codice_1. Les valeurs possibles sont bien sûr les valeurs de couleur. Par exemple ceci :
produit cela :
Paragraphe avec fond coloré
Par défaut, une boîte CSS n'a aucune couleur de fond: la valeur de la propriété codice_1 est en effet codice_3.
Image du fond.
La propriété codice_4 définit une image de remplissage du fond d'une boîte CSS.
Elle accepte comme valeur l'URL de l'image et est tout à fait compatible avec la propriété précédente codice_1.
En effet, la couleur de fond est peinte "sous" l'image.
Ainsi, la couleur peut apparaître dans une image comportant des zones transparentes, et cette couleur remplira le reste de la surface de la boîte si l'image n'a pas des dimensions suffisantes.
L'URL doit être spécifié comme une chaîne de caractère à la fonction codice_6 :
background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a6/VST_image_of_the_Hercules_galaxy_cluster.jpg");
On peut définir :
Fond en dégradé de couleur.
La même propriété codice_4 permet d'afficher un dégradé de couleur, en utilisant une fonction de dégradé au lieu de la fonction codice_6.
Gradient linéaire.
Exemple :
background-image: linear-gradient(rgb(100,100,160),rgb(100,160,160));
Le fond en dégradé.
L'angle peut être spécifié en premier argument.
Exemples :
Il est possible d'utiliser plus de deux couleurs, chacune étant suivie de la position relative dans le dégradé.
background-image: linear-gradient(to right, rgb(255,0,0), rgb(255,255,255) 25%, rgb(0,255,255) 50% ,rgb(0,0,0));
Le fond en dégradé.
La position peut aussi être spécifiée pour les première et dernière couleurs :
background-image: linear-gradient(to right, rgb(200,200,200) 35%, rgb(0,100,200) 65%);
/* Équivaut à : rgb(200,200,200), rgb(200,200,200) 35%, rgb(0,100,200) 65%, rgb(0,100,200) */
Le fond en dégradé.
Gradient linéaire répété.
La fonction codice_12 permet de définir un dégradé linéaire répété, en spécifiant les positions avec des unités absolues.
background-image: repeating-linear-gradient(110deg,
 rgb(200, 0, 0),
 rgb(100, 0, 0) 20px,
 rgb(200, 0, 0) 40px);
Le fond en dégradé.
Gradient radial.
La fonction codice_13 permet de définir un dégradé radial.
Les premiers paramètres spécifient la forme et la position du centre où débute le dégradé.
La fonction codice_14 permet de définir un dégradé radial répété.
Le rayon du cercle (codice_15) doit être spécifié, les deux rayons pour la forme en ellipse (codice_16).
Gradient conique.
La fonction codice_17 permet de définir un dégradé conique, c'est-à-dire dont la couleur change selon l'angle par rapport à un angle de départ centré sur un point.
Les premiers arguments spécifient ces deux paramètres.
Le raccourci codice_18.
La propriété codice_18 permet de définir une couleur ou une image de fond. Exemple :
codice_20
donne :
Test de couleur
Opacité.
La propriété codice_21 à 0 engendre une transparence totale, à 1 une opacité totale.
Exemple d'un test d'opacité / transparence à 50 % :
<div style="background-color: yellow; padding: 5px 20px;">
 <div style="background-color: lightblue; opacity: 0.5;">Bleu sur jaune.</div>
 <div style="background-color: red; opacity: 0.5;">Rouge sur jaune.</div>
</div>
donne :
 Bleu sur jaune.
 Rouge sur jaune.
Bordures et marges.
La bordure "(border)" est séparée du contenu par un espace intérieur "(padding)", et du bord de la boîte par une marge "(margin)".
Chaque propriété définie la valeur pour les quatre côtés de la zone rectangulaire de l'élément, et peut être déclinée en quatre propriétés (qui ont la priorité) pour modifier chacun des côtés individuellement.
Les propriétés codice_22, codice_23 et codice_24 spécifient la bordure, l'espacement interne et l'espacement externe pour les quatre côtés, et définissent donc quatre valeurs successives dont seule la première est obligatoire, dans l'ordre suivant :
L'ordre des valeurs est celui de la rotation dans le sens horaire en partant du haut.
Espace intérieur.
On peut distinguer les quatre espaces intérieurs :
La syntaxe est du type codice_29, ou "valeur" est exprimée comme d'habitude en centimètres, millimètres, pouces, pixels ou cadratins (voir le chapitre "Valeurs et unités > Distances et dimensions").
.foo {
 padding-top: 0.5em;
 padding-right: 1em
 padding-bottom: 0.5em;
 padding-left: 1em;
Si les quatre valeurs sont égales, on peut utiliser la propriété codice_23
En fait, la propriété codice_23 permet de définir les quatre espaces intérieurs en une seule fois :
L'ordre est celui du sens horaire : haut ("top" à 12h), droite ("right" à 3h), bas ("bottom" à 6h), gauche ("left" à 9h).
En reprenant l'exemple avec quatre propriétés, l'équivalent est :
Lorsqu'une valeur est absente, la propriété vaut la même valeur que celle située deux positions avant :
ou une position avant (si une seule valeur) :
Bordure.
La bordure est définie par
<div style="border-color: gray;
 border-style: dotted;
 border-width: medium;">
 Bla bla bla
</div>
Bla bla bla
On peut synthétiser tout cela avec codice_22, l'exemple ci-dessus devient alors
<div style="border: gray dotted medium;">
 Bla bla bla
</div>
On peut définir une bordure différente
.foo {
 border-top:solid 1px black;
 border-bottom:solid 1px black;
 border-left:none;
 border-right:none;
et on peut définir indépendamment chaque caractéristique de chaque trait : codice_45, codice_46, …
Marge extérieure.
La marge extérieure est définie par la propriété codice_24, selon le même modèle que l'espace intérieur. On peut définir les quatre marges indépendamment (codice_48, codice_49, codice_50, codice_51) ou bien les définir avec une seule propriété (codice_24).
Exemples d'applications.
.double-soulignement {
 text-decoration: underline;
 padding-bottom: 0.08em;
 border-bottom: solid 1px;
Contour.
Le contour s'apparente à la bordure dont il reprend en grande partie les propriétés de couleur, de style et de largeur. Il en diffère cependant sur plusieurs points :
Les syntaxes des propriétés de contours sont similaires à celles des bordures : 
L'utilisation principale des contours est de signaler visuellement quel élément a reçu le focus à la suite d'une action de l'utilisateur: entrée dans un champ de formulaire, sélection d'un bouton ou d'un lien. Chaque navigateur graphique restitue alors un contour selon ses propres styles par défaut. Ces contours jouent donc un rôle clé pour les utilisateurs qui interagissent avec la page Web via le clavier ou un dispositif similaire, et non avec la souris. Les auteurs de pages Web ne doivent en aucun cas tenter de forcer leur disparition, et ne doivent agir qu'avec prudence s'ils souhaitent en modifier l'apparence. 
Enfin, les propriétés de contours sont inégalement supportées selon les navigateurs graphiques, et leurs valeurs par défaut diffèrent (par exemple, une bordure grise pointillée dans Internet Explorer, une inversion des couleurs de l'élément dans Opera)...
Arrondis.
On définit l'arrondit d'un cadre avec le rayon de ses quatre coins :
 border-radius: 10px;
Profondeur.
La 3D peut-être mesurée par trois axes : x (longueur), y (hauteur), z (profondeur). Pour définir dans quel ordre les objets doivent se superposer, on utilise la propriété codice_70, qui représente leurs positions sur l'axe z.
Exemple :
 <div style="background-color: lightblue; position: 50px; z-index: 9; margin-bottom:-10px;">Bleu sous rouge</div>
 <div style="background-color: red; position: 50px; z-index: 11;">Rouge sur bleu.</div>
donne :
 Bleu sous rouge
 Rouge sur bleu.