CSS Properties: How to set background is clipped to the padding box?

Last update on February 16 2024 13:18:56 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!-- Set the character encoding of the HTML document -->
<title>How to set background is clipped to the padding box</title><!-- Set the title of the HTML document -->
<style> /* CSS style start*/
#xyz1 {
border: 5px #0033FF; /* Set border properties for the div */
border-style: dotted double; /* Specify the border style */
margin: 2em; /* Set margin for the div */
padding: 2em; /* Set padding for the div */
background: #3399CC; /* Set background color for the div */
background-clip: padding-box; /* Specify the painting area of the background to be inside the padding box */
}
</style>
</head>
<body>
<div id="xyz1"><!-- Div with specified styling -->
<h2>w3resource</h2>
<p>Free web development tutorial.</p>
</div>
</body>
</html>

Explanation:

The HTML document contains a div element with the ID xyz1.
CSS styles are applied to this div to specify its appearance, including borders, margins, padding, and background color.
The background-clip property determines the painting area of the background within the div: