---
title: CSS Backgrounds and Borders
slug: Web/CSS/CSS_Backgrounds_and_Borders
tags:
  - CSS
  - CSS Backgrounds and Borders
  - Guide
  - Overview
  - Reference
spec-urls: https://drafts.csswg.org/css-backgrounds/
---
{{CSSRef}}

Styles in the **CSS Backgrounds and Borders** module allow filling backgrounds with color or an image (clipped or resized), or modifying them in other ways.
These styles can also decorate borders with lines or images, and make them square or rounded.
(Additionally, element boxes can be decorated with a shadow.)

## Reference

### CSS Properties

- {{cssxref("background")}}
- {{cssxref("background-attachment")}}
- {{cssxref("background-clip")}}
- {{cssxref("background-color")}}
- {{cssxref("background-image")}}
- {{cssxref("background-origin")}}
- {{cssxref("background-position")}}
- {{cssxref("background-position-x")}}
- {{cssxref("background-position-y")}}
- {{cssxref("background-repeat")}}
- {{cssxref("background-size")}}
- {{cssxref("border")}}
- {{cssxref("border-bottom")}}
- {{cssxref("border-bottom-color")}}
- {{cssxref("border-bottom-left-radius")}}
- {{cssxref("border-bottom-right-radius")}}
- {{cssxref("border-bottom-style")}}
- {{cssxref("border-bottom-width")}}
- {{cssxref("border-collapse")}}
- {{cssxref("border-color")}}
- {{cssxref("border-image")}}
- {{cssxref("border-image-outset")}}
- {{cssxref("border-image-repeat")}}
- {{cssxref("border-image-slice")}}
- {{cssxref("border-image-source")}}
- {{cssxref("border-image-width")}}
- {{cssxref("border-left")}}
- {{cssxref("border-left-color")}}
- {{cssxref("border-left-style")}}
- {{cssxref("border-left-width")}}
- {{cssxref("border-radius")}}
- {{cssxref("border-right")}}
- {{cssxref("border-right-color")}}
- {{cssxref("border-right-style")}}
- {{cssxref("border-right-width")}}
- {{cssxref("border-style")}}
- {{cssxref("border-top")}}
- {{cssxref("border-top-color")}}
- {{cssxref("border-top-left-radius")}}
- {{cssxref("border-top-right-radius")}}
- {{cssxref("border-top-style")}}
- {{cssxref("border-top-width")}}
- {{cssxref("border-width")}}
- {{cssxref("box-shadow")}}

## Tools

- [Using multiple backgrounds](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
  - : Explains how to set one or more backgrounds on an element.
- [Resizing background images](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images)
  - : Describes how to change the size and repeating behavior of background images.
- [Applying color to HTML elements using CSS](/en-US/docs/Web/HTML/Applying_color)
  - : An overview of how CSS color can be used in HTML, including for borders.
- [Border-image generator](/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator)
  - : This interactive tool lets you visually create border images (the {{cssxref("border-image")}} property).
- [Border-radius generator](/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator)
  - : This interactive tool lets you visually create rounded corners (the {{cssxref("border-radius")}} property).
- [Box-shadow generator](/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator)
  - : This interactive tool lets you visually create shadows behind elements (the {{cssxref("box-shadow")}} property).

## Specifications

{{Specifications}}
