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

Go to Exercise page


HTML Code:

<!DOCTYPE html>
<meta charset="utf-8"><!-- Set the character encoding of the HTML document -->
<title>How to set background is clipped to the border 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: border-box; /* Specify the painting area of the background to be inside the border box */
<div id="xyz1"><!-- Div with specified styling -->
<p>Free web development tutorial.</p>


  • 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:
    • border-box clips the background to the area within the border box of the div.
  • The content within the div consists of an <h2> heading and a paragraph (<p>).

Live Demo:

See the Pen background-clip-border-box-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes No

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

Follow us on Facebook and Twitter for latest update.