background-clip - HTML CSS CSS Property

HTML CSS examples for CSS Property:background-clip

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background-clip

Description

The background-clip CSS property sets whether an element's background extends underneath it's border or not.

The following table summarizes the background-clip Property.

Item Value
Default value: border-box
Applies to:All elements. It also applies to ::first-letter and ::first-line.
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


background-clip:     border-box | padding-box | content-box | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
border-box Default value. background extends to the outside edge of the border. Background is drawn below the border.
padding-box background extends to the outside edge of the padding. No background is drawn below the border.
content-box background is clipped to the content box only. No background is drawn below the border and padding area.
initial Sets this property to its default value.
inherit take the value of its parent element background-clip property.

The example below shows the background-clip property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Example of CSS3 Background Clipping</title>
  <style type="text/css">
  .box {<!--  w  w  w .  j ava 2 s.  c om-->
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: orange;
  }
  .clip1 {
    background-clip: border-box;
  }
  .clip2 {
    background-clip: padding-box;
  }
  .clip3 {
    background-clip: content-box;
  }
</style>
 </head>
 <body>
  <h2>Default Background Behavior</h2>
  <div class="box"></div>
  <h2>Background Clipping Using border-box</h2>
  <div class="box clip1"></div>
  <h2>Background Clipping Using padding-box</h2>
  <div class="box clip2"></div>
  <h2>Background Clipping Using content-box</h2>
  <div class="box clip3"></div>
 </body>
</html>

Related Tutorials