Backgrounds, borders, and box shadows in action

This sample of borders, backgrounds, and box shadows consists of centered background images made of linear and radial gradients. A series of box shadows make the border appear to "pop". The element on the left has a border image set. The element on the right has a rounded dotted border.

<article>
  <div></div>
  <div></div>
</article>

article {
  display: flex;
  gap: 10px;
}
div {
  color: #58ade3;
  height: 320px;
  width: 240px;
  padding: 20px;
  margin: 10px;
  border: dotted 15px; /* defaults to `currentColor` */
  border-radius: 100px 0;
  background-image:
    radial-gradient(
      circle,
      transparent 60%,
      currentColor 60% 70%,
      transparent 70%
    ),
    linear-gradient(45deg, currentColor, white),
    linear-gradient(transparent, transparent);
  /* the third transparent background image was added to provide space for the background color to show through */
  background-color: currentColor;
  background-position: center;
  background-size:
    60px 60px,
    120px 120px;
  background-clip: content-box, content-box, padding-box;
  box-shadow:
    inset 5px 5px 5px rgb(0 0 0 / 0.4),
    inset -5px -5px 5px rgb(0 0 0 / 0.4),
    5px 5px 5px rgb(0 0 0 / 0.4),
    -5px -5px 5px rgb(0 0 0 / 0.4);
}
div:first-of-type {
  border-radius: 0;
  border-image-source: repeating-conic-gradient(
    from 3deg at 25% 25%,
    currentColor 0 3deg,
    transparent 3deg 6deg
  );
  border-image-slice: 30;
}

The background images are defined with background-image. The images are centered with background-position. Different values of the background-clip property for the multiple background images are used to make the background images stay within the content box. The background color gets clipped to the padding box preventing the background from appearing through the transparent sections for the border-image and the dotted border. The rounded corners in the element on the right are created using the border-radius property. A single box-shadow declaration is used to set all the shadows, both inset and outset.

<line-style> enumerated type

Guides

Using multiple backgrounds: Setting one or more backgrounds on an element.
Resizing background images: Changing the size and repeating behavior of background images.
Scaling SVG backgrounds: How SVG aspect ratio, SVG dimension values, and the CSS background-size property impact the scaling of SVG background images.
Using CSS gradients: Creating CSS gradients and using them as background images.
Learn CSS: background and borders: Learn how to implement decorative images using CSS background images.
Learn CSS: the box model: Learn how borders and other box model properties impact the CSS box model.

Specifications

Specification
CSS Backgrounds and Borders Module Level 3
CSS Backgrounds Module Level 4

Help improve MDN

Yes No

Learn how to contribute

This page was last modified on Feb 5, 2026 by MDN contributors.

Backgrounds, borders, and box shadows in action

Reference

Properties

Data types

Guides

Specifications

See also

Help improve MDN