CSS Backgrounds and Borders is a module of CSS that lets you style elements' backgrounds and borders. Backgrounds can be filled with a color or image, clipped or resized, and otherwise modified. Borders can be decorated with lines or images, and made square or rounded. Additionally, element boxes can be decorated with a shadow.
Reference
CSS Properties
backgroundbackground-attachmentbackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbox-shadow
Tools
- Using multiple backgrounds
- Explains how to set one or more backgrounds on an element.
- Scaling background images
- Describes how to change the size and repeating behavior of background images.
- Applying color to HTML elements using CSS
- An overview of how CSS color can be used in HTML, including for borders.
- Border-image generator
- This interactive tool lets you visually create border images (the
border-imageproperty). - Border-radius generator
- This interactive tool lets you visually create rounded corners (the
border-radiusproperty). - Box-shadow generator
- This interactive tool lets you visually create shadows behind elements (the
box-shadowproperty).
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 | Candidate Recommendation | |
| CSS Level 2 (Revision 1) | Recommendation | |
| CSS Level 1 | Recommendation |