What are the possible values for the box-sizing property in CSS?

• content-box (default value) - the width and height of the element include only the content. Padding and borders are added to the specified sizes.
• border-box - the width and height of the element include content, padding, and borders. The specified sizes encompass all three components.
• padding-box (experimental, not widely supported) - the width and height include content and padding. Borders are added to the specified sizes.

Example demonstrating content-box and border-box:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box; /* Actual width will be 100 + 2*20 + 2*5 = 150px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box; /* Actual width will be 100px */
}