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 »