CSS background-clip

The CSS background-clip property is used to define the area to apply the background style within the specified element. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      #mydiv{border: 3px solid crimson; padding: 40px; background: purple;
            background-clip: content-box; color: white;}
   </style>
</head>
<body>
   
   <div id="mydiv">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque, illo!</div>
   
</body>
</html>
Output
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque, illo!

Since I've defined the background-clip property with content-box as its value. Therefore the background style is applied only to the content area, not the whole.

CSS background-clip Syntax

The syntax of background-clip property in CSS, is:

background-clip: x;

The value of x should be any of the following:

  • content-box - used to apply the background style only to the content area
  • padding-box - used to apply the background style to the content area along with padding area
  • border-box - used to apply the background style to occupy the whole area. This is the default value
  • initial - used to use the default value
  • inherit - used to use the value inherited by the parent element

CSS background-clip Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      #a, #b, #c {border: 6px dotted crimson; padding: 30px; background: purple;
           color: white;}
      #a {background-clip: content-box;}
      #b {background-clip: padding-box;}
      #c {background-clip: border-box;}
   </style>
</head>
<body>
   
   <h2>background-clip: content-box</h2>
   <div id="a">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque, illo!</div>

   <h2>background-clip: padding-box</h2>
   <div id="b">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates, culpa.</div>

   <h2>background-clip: border-box</h2>
   <div id="c">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias, incidunt?</div>
   
</body>
</html>
Output

background-clip: content-box

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque, illo!

background-clip: padding-box

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates, culpa.

background-clip: border-box

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias, incidunt?

CSS Online Test


« Previous Tutorial Next Tutorial »