The overflow-clip-box CSS property specifies relative to which box the clipping happens when there is an overflow. It is short hand for the overflow-clip-box-inline and overflow-clip-box-block properties.

/* Keyword values */
overflow-clip-box: padding-box;
overflow-clip-box: content-box;

/* Two values */
overflow-clip-box: padding-box content-box;
overflow-clip-box: content-box content-box;

/* Global values */
overflow-clip-box: inherit;
overflow-clip-box: initial;
overflow-clip-box: unset;

Syntax

Values

padding-box

This keyword makes the clipping be related to the padding box.

content-box

This keyword makes the clipping be related to the content box.

Formal syntax

padding-box | content-box

Examples

padding-box

HTML

<div class="things">
  <input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box">
  <div class="scroll padding-box"><span>ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ</span></div>
</div>

CSS

.scroll {
  overflow: auto;
  padding: 0 30px;
  width: 6em;
  border: 1px solid black;
  background: lime content-box;
}

.padding-box {
  overflow-clip-box: padding-box;
}

JS

function scrollSomeElements() {
  var elms = document.querySelectorAll('.scroll');
  for (i=0; i < elms.length; ++i) {
    elms[i].scrollLeft=80;
  }
}
var elt = document.queryElementsByTagName('body')[0];

elt.addEventListener("load", scrollSomeElements, false);

Result

Specifications

This property has been proposed to the W3C CSSWG; it is not yet on the standard track but, if accepted, should appear in CSS Overflow Module Level 3.

Browser compatibility

See also

• Related CSS properties: text-overflow, white-space, overflow, overflow-x, overflow-y, clip, display