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:
Live Demo:
See the Pen background-clip-padding-box-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4