Backgrounds, Borders, and Box Decorations

Basic

Backgrounds and Borders is the CSS presentation owner for painting a box surface and decorating its edges. This lesson explains background layers, background positioning and sizing, gradients as background images, borders, rounded corners, border images, and box shadows. It builds on the box model without re-teaching spacing or generic color syntax.

The central distinction is simple: the Box Model describes the box edges and spacing; Color describes the color values; this lesson describes how backgrounds and borders are painted around those boxes. The Masking, Clipping, Compositing, and Blending lesson owns detailed compositing and blending, while the Images and Gradients lesson will deepen image-value and gradient construction beyond the background-painting context used here.

Background painting happens in layers

A background is not one indivisible paint operation. A box can have several background-image layers, each with its own position, size, repeat, attachment, origin, and clip. The comma-separated lists correspond by position. The first listed image is painted on top of the later image layers; the background color is behind the image layers.

?

Each background layer has its own geometry

`background-position` chooses where a background image is placed in its background positioning area. `background-size` determines the rendered size of the image; `auto` preserves the image dimensions or aspect ratio as defined by the image and sizing rules. `background-repeat` controls whether the image is tiled when its rendered area does not cover the positioning area.

The lists can be paired: the first position belongs to the first image, the second position to the second image, and so on. A missing value in a comma-separated list is repeated according to the property’s list-matching rules rather than creating an unrelated fourth layer.

?

Cover and contain solve different fitting problems

When a background image must fit a background positioning area while preserving its aspect ratio, `cover` scales the image until the area is completely covered, which can leave parts of the image outside the area. `contain` scales it until the whole image fits inside the area, which can leave uncovered space.

?

The background positioning and painting areas are distinct concepts

`background-origin` chooses the box used to position a background image. `background-clip` chooses the area into which the background is painted. These choices can be content-box, padding-box, or border-box where supported by the specification. They are not substitutes for changing the box model itself.

?

Gradients are background images

A CSS gradient is a generated image value that can be used as a background image. The Images owner explains how gradient image values are constructed; this lesson focuses only on what happens after a gradient is supplied to the background painting machinery: its layer, sizing, positioning, repetition, and clipping.

The color values inside a gradient belong to the Color owner. This lesson teaches the gradient’s image and painting behavior, not a second color curriculum.

?

Borders add decoration around the box

A border has width, style, and color. The border is painted around the box and is part of the box’s visual geometry, while the Box Model remains the owner of spacing relationships among content, padding, border, and margin. A border style such as `solid`, `dashed`, or `double` changes how that border is drawn.

The `border` shorthand can set multiple border components at once. Side-specific and logical border properties let an author target particular edges. Border color values use the CSS Color model; border width uses CSS sizing/value machinery rather than creating a new sizing system here.

?

Rounded corners shape the border and background painting

`border-radius` rounds the corners of a box. The radii apply to the corner geometry used by the border and also affect how backgrounds are clipped to rounded corners. Large radii are adjusted by the CSS rules so the corner curves remain geometrically valid.

Rounded corners do not change the element’s margin or padding values. They change the shape used for painting the border and background.

?

Border images use an image around the border area

The border-image family lets an image provide the border decoration. The source image is divided into regions, then those regions are placed around the border according to the border-image slicing, width, outset, and repeat rules. This is a decoration mechanism; it does not replace the ordinary box model border width used for layout.

?

Box shadows paint effects outside or inside the box

`box-shadow` paints one or more shadows associated with a box. A shadow can have offsets, blur, spread, and a color. The `inset` keyword places the shadow inside the box instead of outside it. Multiple shadows are layered in the order defined by the shadow painting rules.

A shadow is a visual effect, not an extra margin. It can extend beyond the border box without increasing the box’s layout dimensions. The Masking, Clipping, Compositing, and Blending curriculum owns more general compositing and blending behavior; here the focus is the box-shadow painting model.

?

Current drafts add more granular background, corner, border, and shadow controls

The current CSS Backgrounds Level 4 draft defines four longhands—`background-repeat-x`, `background-repeat-y`, `background-repeat-block`, and `background-repeat-inline`—and four background-position longhands—`background-position-x`, `background-position-y`, `background-position-block`, and `background-position-inline`. These belong here because they refine the background-painting model rather than creating a new layout system.

The current CSS Borders and Box Decorations Level 4 working draft adds `corner-shape` for non-rounded corner profiles, `border-shape` for basic-shape border paths, and longhands such as `box-shadow-color`, `box-shadow-offset`, `box-shadow-blur`, `box-shadow-spread`, and `box-shadow-position`. These are developing decoration controls, not replacements for the stable border-radius and box-shadow concepts.

?

?

Backgrounds, borders, and the box model work together

A useful debugging sequence is to separate geometry from painting. First identify the box dimensions and spacing using the Box Model and Sizing lessons. Then ask which border is painted, which background layer is active, what its positioning and clipping areas are, and whether a shadow extends beyond the box. This prevents treating every visual mismatch as a sizing problem.

?

What this lesson deliberately does not own

Color owns the meaning and processing of color values. Box Model owns padding, margins, and margin collapsing. Sizing owns dimensions and `box-sizing`. Display and Flow own box generation and normal-flow participation. Overflow owns clipping and scrolling. Positioning owns out-of-flow placement and stacking. The Images/Gradients/Replaced Content lesson owns generated images and replaced-content sizing; this lesson uses gradients only as background images. The Masking, Clipping, Compositing, and Blending lesson owns general compositing and blending.

Specification status and practical scope

CSS Backgrounds and Borders Level 3 has a current CSSWG Editor’s Draft dated 16 December 2025. CSS Backgrounds Level 4 is a W3C First Public Working Draft dated 3 August 2026, and CSS Borders and Box Decorations Level 4 is a W3C Working Draft dated 1 September 2026. The Level 4 controls added above remain developing work and must not be presented as frozen or universally implemented.

The specification status is a snapshot. Recheck the official W3C publication history when this lesson is next audited.

Quick review

You should now be able to explain background layer order, control background position/size/repeat, distinguish cover from contain, distinguish origin from clip, treat gradients as generated image values, build borders and rounded corners, recognize current corner/border/shadow draft controls, understand border-image at a conceptual level, and use box-shadow without confusing painting effects with layout dimensions.