CSS <box-edge> Data Type

The CSS <box-edge> data type represents keywords that identify the edges of different CSS and SVG reference boxes. These values are used by CSS features that need to determine which part of an element's box is used for positioning, clipping, painting, masking, or creating shapes.

<box-edge> Types

The <box-edge> concept includes several related data types. Each type allows a particular group of box-edge keywords appropriate for different CSS features.

<visual-box> = content-box | padding-box | border-box
<layout-box> = <visual-box> | margin-box
<paint-box> = <visual-box> | fill-box | stroke-box
<coord-box> = <paint-box> | view-box
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

The related <shape-box> type consists of the visual box values plus margin-box. The exact set of permitted box-edge values depends on the property or CSS feature using the data type. :chatgpt-content-reference{index="0"}

<box-edge> Values

Value	Description
`content-box`	Uses the outer edge of the element's content area.
`padding-box`	Uses the outer edge of the element's padding area.
`border-box`	Uses the outer edge of the element's border area.
`margin-box`	Uses the outer edge of the element's margin area.
`fill-box`	Uses an SVG object's bounding box. For CSS boxes, it is treated as `content-box`.
`stroke-box`	Uses an SVG object's stroke bounding box. For CSS boxes, it is treated as `border-box`.
`view-box`	Uses the nearest SVG viewport's origin box. For CSS boxes, it is treated as `border-box`.

CSS Box Model Level 4 also defines half-border-box, which identifies a box edge passing through the center of the border area. The keyword is available only where the grammar of a particular CSS feature permits it. :chatgpt-content-reference{index="1"}

<box-edge> Example

The following example demonstrates three visual box values with background-clip. Each value determines how far the background extends through the element's box.

.content-box {
  background-clip: content-box;
}
.padding-box {
  background-clip: padding-box;
}
.border-box {
  background-clip: border-box;
}

Browser Result

content-box

padding-box

border-box

The content-box, padding-box, and border-box keywords form the <visual-box> data type used by properties such as background-clip and background-origin. :chatgpt-content-reference{index="2"}

Box-edge data types are used by several CSS properties, including:

Specifications

The box-edge data types and keywords are defined in the CSS Box Model Module Level 4 . Individual CSS modules determine which box-edge types and keywords are accepted by specific properties. :chatgpt-content-reference{index="3"}

CSS <box-edge> Data Type