demo · v150

Dashed & dotted borders

background-clip: border-area clips the background to the painted part of the border strokes — which means with dashed and dotted borders, the gradient or image only appears inside the dashes and dots themselves. The gaps are transparent, revealing whatever is behind the element.

The background only fills the painted border pixels. For dashed borders, the gradient appears only in the dashes. For dotted borders, it appears only in each dot circle. double borders show the gradient in both the inner and outer stripes.

Border width: 8px

Gradient:

solid full gradient

dashed gradient in dashes

dotted gradient in dots

double gradient in both stripes

groove clipped to groove

dashed + rounded radius + border-area

dotted + pill dots follow curve

dashed circle round path dashes

Dashed gradient border

Only the dashes are painted. The gap between dashes is transparent — the element background (background-color) or document background shows through.

Dotted gradient border

Each dot is a circle clipped from the gradient. The gradient is positioned relative to the border-box, so adjacent dots get different gradient colors.

/* Dashed gradient border with background-clip: border-area */
.dashed-gradient-box {
  border: 8px dashed transparent;
  background-image: linear-gradient(135deg, blue, green);
  background-clip: border-area;     /* Chrome 150 */
}

/* Dotted gradient border */
.dotted-gradient-box {
  border: 8px dotted transparent;
  background-image: conic-gradient(from 0deg, blue, green, blue);
  background-clip: border-area;
}

/* Combined with border-radius: dashes follow the curve */
.rounded-dashed {
  border: 8px dashed transparent;
  border-radius: 24px;
  background-image: linear-gradient(to right, rose, blue);
  background-clip: border-area;
}

/* Key: border-color must be transparent so the background shows through */
/* background-clip: border-area REPLACES the need for a separate solid border color */

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

Dashed gradient border

Dotted gradient border

see also

implementation reference