---
title: CSS Background and Borders
slug: Web/CSS/CSS_Backgrounds_and_Borders
tags:
  - CSS
  - CSS Backgrounds and Borders
  - CSS Reference
  - NeedsTranslation
  - Overview
  - TopicStub
translation_of: Web/CSS/CSS_Backgrounds_and_Borders
translation_of_original: Web/CSS/CSS_Background_and_Borders
original_slug: Web/CSS/CSS_Background_and_Borders
---
<p>{{CSSRef}}</p>

<p><strong>CSS Background and Borders</strong> is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.</p>

<h2 id="Reference">Reference</h2>

<h3 id="CSS_Properties">CSS Properties</h3>

<div class="index">
<ul>
 <li>{{cssxref("background")}}</li>
 <li>{{cssxref("background-attachment")}}</li>
 <li>{{cssxref("background-clip")}}</li>
 <li>{{cssxref("background-color")}}</li>
 <li>{{cssxref("background-image")}}</li>
 <li>{{cssxref("background-origin")}}</li>
 <li>{{cssxref("background-position")}}</li>
 <li>{{cssxref("background-repeat")}}</li>
 <li>{{cssxref("background-size")}}</li>
 <li>{{cssxref("box-shadow")}}</li>
 <li>{{cssxref("border")}}</li>
 <li>{{cssxref("border-bottom")}}</li>
 <li>{{cssxref("border-bottom-color")}}</li>
 <li>{{cssxref("border-bottom-left-radius")}}</li>
 <li>{{cssxref("border-bottom-right-radius")}}</li>
 <li>{{cssxref("border-bottom-style")}}</li>
 <li>{{cssxref("border-bottom-width")}}</li>
 <li>{{cssxref("border-collapse")}}</li>
 <li>{{cssxref("border-color")}}</li>
 <li>{{cssxref("border-image")}}</li>
 <li>{{cssxref("border-image-outset")}}</li>
 <li>{{cssxref("border-image-repeat")}}</li>
 <li>{{cssxref("border-image-slice")}}</li>
 <li>{{cssxref("border-image-source")}}</li>
 <li>{{cssxref("border-image-width")}}</li>
 <li>{{cssxref("border-left")}}</li>
 <li>{{cssxref("border-left-color")}}</li>
 <li>{{cssxref("border-left-style")}}</li>
 <li>{{cssxref("border-left-width")}}</li>
 <li>{{cssxref("border-radius")}}</li>
 <li>{{cssxref("border-right")}}</li>
 <li>{{cssxref("border-right-color")}}</li>
 <li>{{cssxref("border-right-style")}}</li>
 <li>{{cssxref("border-right-width")}}</li>
 <li>{{cssxref("border-style")}}</li>
 <li>{{cssxref("border-top")}}</li>
 <li>{{cssxref("border-top-color")}}</li>
 <li>{{cssxref("border-top-left-radius")}}</li>
 <li>{{cssxref("border-top-right-radius")}}</li>
 <li>{{cssxref("border-top-style")}}</li>
 <li>{{cssxref("border-top-width")}}</li>
 <li>{{cssxref("border-width")}}</li>
</ul>
</div>

<h2 id="Guides">Guides</h2>

<dl>
 <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Using CSS multiple backgrounds</a></dt>
 <dd>Explains how to set backgrounds on elements and how they will interact with it.</dd>
 <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Scaling background images</a></dt>
 <dd>Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.</dd>
</dl>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Backgrounds') }}</td>
   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#border')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable()}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>4.0</td>
   <td>3.5</td>
   <td>1.0 (85)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatGeckoMobile("1.9.2")}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>