Questo diagramma illustra le quattro aree del riquadrato generico CSS: contenuto, cuscinetto [padding], bordo, e margine.
Ci sono quattro riquadrati innestati: l'area del contenuto è la più interna, poi vengono le aree del cuscinetto, del bordo, e del margine. Ogni area ha un differente stile del bordo per distinguere il suo limite [edge]: il limite del contenuto è sottile e solido; quello del cuscinetto è sottile e tratteggiato; quello del bordo è spesso e solido; quello del margine è spesso e tratteggiato.
Sotto i riquadrati, una didascalia elenca gli stili del bordo usati per i quattro limiti.