CSS background-clip

Please Share On:

Definition:

CSS background-clip specifies how far the background image or color should extend within an element.

Property Values are:

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

Syntax:

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

1) background-clip:content-box;

<!DOCTYPE html>
<html>
<head>
<style>
#background_clip{
  border: 10px dashed black;
  padding: 25px;
  background-color: pink;
  background-clip:content-box;
}
</style>
</head>

<body>
<div id="background_clip">
  <h1>Here is an example of background-clip: content-box</h1>
</div>
</body>
</html>

Result:

Here is an example of background-clip: content-box


2) background-clip:border-box;

<!DOCTYPE html>
<html>
<head>
<style>
#background_clip{
  border: 10px dashed black;
  padding: 25px;
  background-color: pink;
  background-clip:border-box;
}
</style>
</head>

<body>
<div id="background_clip">
  <h1>Here is an example of background-clip: border-box</h1>
</div>
</body>
</html>

Result:

Here is an example of background-clip: border-box


3) background-clip:padding-box;

<!DOCTYPE html>
<html>
<head>
<style>
#background_clip{
  border: 10px dashed black;
  padding: 25px;
  background-color: pink;
  background-clip:padding-box;
}
</style>
</head>

<body>
<div id="background_clip">
  <h1>Here is an example of background-clip: padding-box</h1>
</div>
</body>
</html>

Result:

Here is an example of background-clip: padding-box



4) background-clip:initial;

<!DOCTYPE html>
<html>
<head>
<style>
#background_clip{
  border: 10px dashed black;
  padding: 25px;
  background-color: pink;
  background-clip:initial;
}
</style>
</head>

<body>
<div id="background_clip">
  <h1>Here is an example of background-clip: initial</h1>
</div>
</body>
</html>

Result:

Here is an example of background-clip: initial

5) background-clip: inherit;

<!DOCTYPE html>
<html>
<head>
<style>
#background_clip{
  border: 10px dashed black;
  padding: 25px;
  background-color: pink;
  background-clip:inherit;
}
</style>
</head>

<body>
<div id="background_clip">
  <h1>Here is an example of background-clip: inherit</h1>
</div>
</body>
</html>

Result:

Here is an example of background-clip: inherit


Donate to support writers.


You may be interested in the following topics:

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial